10 html5 API, о которых не все знают

• 11, 15, 2012
•  bullgare
•  No category
• No Comments.

Не самые известные html5 API.

1. Element.classList — упрощённое управление CSS-классами из javascript
   
   Go

   // Add a class to an element myElement.classList.add("newClass"); // Remove a class to an element myElement.classList.remove("existingClass"); // Check for existence myElement.classList.contains("oneClass"); // Toggle a class myElement.classList.toggle("anotherClass");

   1 2 3 4 5 6 7 8 9 10 11

   // Add a class to an element myElement.classList.add("newClass");   // Remove a class to an element myElement.classList.remove("existingClass");   // Check for existence myElement.classList.contains("oneClass");   // Toggle a class myElement.classList.toggle("anotherClass");

2. ContextMenu API — просто добавляет новые строки в контекстное меню браузера
   
   Go

   <section contextmenu="mymenu"> <!-- For the purpose of cleanliness, I'll put my menu inside the element that will use it --> <!-- add the menu --> <menu type="context" id="mymenu"> <menuitem label="Refresh Post" onclick="window.location.reload();" icon="/images/refresh-icon.png"></menuitem> <menu label="Share on..." icon="/images/share_icon.gif"> <menuitem label="Twitter" icon="/images/twitter_icon.gif" onclick="goTo('//twitter.com/intent/tweet?text=' + document.title + ': ' + window.location.href);"></menuitem> <menuitem label="Facebook" icon="/images/facebook_icon16x16.gif" onclick="goTo('//facebook.com/sharer/sharer.php?u=' + window.location.href);"></menuitem> </menu> </menu> </section>

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

   <section contextmenu="mymenu">   <!--     For the purpose of cleanliness,     I'll put my menu inside the element that will use it   -->     <!-- add the menu -->   <menu type="context" id="mymenu">     <menuitem label="Refresh Post" onclick="window.location.reload();" icon="/images/refresh-icon.png"></menuitem>     <menu label="Share on..." icon="/images/share_icon.gif">       <menuitem label="Twitter" icon="/images/twitter_icon.gif" onclick="goTo('//twitter.com/intent/tweet?text=' + document.title + ':  ' + window.location.href);"></menuitem>       <menuitem label="Facebook" icon="/images/facebook_icon16x16.gif" onclick="goTo('//facebook.com/sharer/sharer.php?u=' + window.location.href);"></menuitem>     </menu>   </menu> </section>

3. Element.dataset — позволяет устанавливать атрибуты data-
   
   Go

   /* Assuming element: <div id="myDiv" data-name="myDiv" data-id="myId" data-my-custom-key="This is the value"></div> */ // Get the element var element = document.getElementById("myDiv"); // Get the id var id = element.dataset.id; // Retrieves "data-my-custom-key" var customKey = element.dataset.myCustomKey; // Sets the value to something else element.dataset.myCustomKey = "Some other value"; // Element becomes: // <div id="myDiv" data-name="myDiv" data-id="myId" data-my-custom-key="Some other value"></div>

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

   /*  Assuming element:     <div id="myDiv" data-name="myDiv" data-id="myId" data-my-custom-key="This is the value"></div>   */   // Get the element var element = document.getElementById("myDiv");   // Get the id var id = element.dataset.id;   // Retrieves "data-my-custom-key" var customKey = element.dataset.myCustomKey;   // Sets the value to something else element.dataset.myCustomKey = "Some other value";     // Element becomes:   //    <div id="myDiv" data-name="myDiv" data-id="myId" data-my-custom-key="Some other value"></div>

4. window.postMessage API — API для обмена строковыми сообщениями с IFRAME из IE8 теперь доступен и в остальных браузерах
   
   Go

   // From window or frame on domain 1, send a message to the iframe which hosts another domain var iframeWindow = document.getElementById("iframe").contentWindow; iframeWindow.postMessage("Hello from the first window!"); // From inside the iframe on different host, receive message window.addEventListener("message", function(event) { // Make sure we trust the sending domain if(event.origin == "http://davidwalsh.name") { // Log out the message console.log(event.data); // Send a message back event.source.postMessage("Hello back!"); } ]);

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

   // From window or frame on domain 1, send a message to the iframe which hosts another domain var iframeWindow = document.getElementById("iframe").contentWindow; iframeWindow.postMessage("Hello from the first window!");   // From inside the iframe on different host, receive message window.addEventListener("message", function(event) {   // Make sure we trust the sending domain   if(event.origin == "http://davidwalsh.name") {     // Log out the message     console.log(event.data);       // Send a message back     event.source.postMessage("Hello back!");   } ]);

5. атрибут autofocus — устанавливает курсор ввода на указанный элемент формы при загрузке страницы (pageReady)
6. Fullscreen API — позволяет программно (с разрешения пользователя) запускать страницу в полноэкранном режиме
   
   Go

   // Find the right method, call on correct element function launchFullScreen(element) { if(element.requestFullScreen) { element.requestFullScreen(); } else if(element.mozRequestFullScreen) { element.mozRequestFullScreen(); } else if(element.webkitRequestFullScreen) { element.webkitRequestFullScreen(); } } // Launch fullscreen for browsers that support it! launchFullScreen(document.documentElement); // the whole page launchFullScreen(document.getElementById("videoElement")); // any individual element

   1 2 3 4 5 6 7 8 9 10 11 12 13 14

   // Find the right method, call on correct element function launchFullScreen(element) {   if(element.requestFullScreen) {     element.requestFullScreen();   } else if(element.mozRequestFullScreen) {     element.mozRequestFullScreen();   } else if(element.webkitRequestFullScreen) {     element.webkitRequestFullScreen();   } }   // Launch fullscreen for browsers that support it! launchFullScreen(document.documentElement); // the whole page launchFullScreen(document.getElementById("videoElement")); // any individual element

7. Page Visibility API предоставляет события, возникающие при попадании фокуса на этот таб или передаче фокуса другому табу в браузере
   
   Go

   // Adapted slightly from Sam Dutton // Set name of hidden property and visibility change event // since some browsers only offer vendor-prefixed support var hidden, state, visibilityChange; if (typeof document.hidden !== "undefined") { hidden = "hidden"; visibilityChange = "visibilitychange"; state = "visibilityState"; } else if (typeof document.mozHidden !== "undefined") { hidden = "mozHidden"; visibilityChange = "mozvisibilitychange"; state = "mozVisibilityState"; } else if (typeof document.msHidden !== "undefined") { hidden = "msHidden"; visibilityChange = "msvisibilitychange"; state = "msVisibilityState"; } else if (typeof document.webkitHidden !== "undefined") { hidden = "webkitHidden"; visibilityChange = "webkitvisibilitychange"; state = "webkitVisibilityState"; } // Add a listener that constantly changes the title document.addEventListener(visibilityChange, function(e) { // Start or stop processing depending on state }, false);

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

   // Adapted slightly from Sam Dutton // Set name of hidden property and visibility change event // since some browsers only offer vendor-prefixed support var hidden, state, visibilityChange; if (typeof document.hidden !== "undefined") {   hidden = "hidden";   visibilityChange = "visibilitychange";   state = "visibilityState"; } else if (typeof document.mozHidden !== "undefined") {   hidden = "mozHidden";   visibilityChange = "mozvisibilitychange";   state = "mozVisibilityState"; } else if (typeof document.msHidden !== "undefined") {   hidden = "msHidden";   visibilityChange = "msvisibilitychange";   state = "msVisibilityState"; } else if (typeof document.webkitHidden !== "undefined") {   hidden = "webkitHidden";   visibilityChange = "webkitvisibilitychange";   state = "webkitVisibilityState"; }   // Add a listener that constantly changes the title document.addEventListener(visibilityChange, function(e) {   // Start or stop processing depending on state   }, false);

8. getUserMedia API с разрешения пользователя даёт доступ к его камере
   
   Go

   // Put event listeners into place window.addEventListener("DOMContentLoaded", function() { // Grab elements, create settings, etc. var canvas = document.getElementById("canvas"), context = canvas.getContext("2d"), video = document.getElementById("video"), videoObj = { "video": true }, errBack = function(error) { console.log("Video capture error: ", error.code); }; // Put video listeners into place if(navigator.getUserMedia) { // Standard navigator.getUserMedia(videoObj, function(stream) { video.src = stream; video.play(); }, errBack); } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed navigator.webkitGetUserMedia(videoObj, function(stream){ video.src = window.webkitURL.createObjectURL(stream); video.play(); }, errBack); } }, false);

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

   // Put event listeners into place window.addEventListener("DOMContentLoaded", function() {   // Grab elements, create settings, etc.   var canvas = document.getElementById("canvas"),     context = canvas.getContext("2d"),     video = document.getElementById("video"),     videoObj = { "video": true },     errBack = function(error) {       console.log("Video capture error: ", error.code);     };     // Put video listeners into place   if(navigator.getUserMedia) { // Standard     navigator.getUserMedia(videoObj, function(stream) {       video.src = stream;       video.play();     }, errBack);   } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed     navigator.webkitGetUserMedia(videoObj, function(stream){       video.src = window.webkitURL.createObjectURL(stream);       video.play();     }, errBack);   } }, false);

9. Battery API для доступа к уровню заряда и статусу батареи
   
   Go

   // Get the battery! var battery = navigator.battery || navigator.webkitBattery || navigator.mozBattery; // A few useful battery properties console.warn("Battery charging: ", battery.charging); // true console.warn("Battery level: ", battery.level); // 0.58 console.warn("Battery discharging time: ", battery.dischargingTime); // Add a few event listeners battery.addEventListener("chargingchange", function(e) { console.warn("Battery charge change: ", battery.charging); }, false);

   1 2 3 4 5 6 7 8 9 10 11 12

   // Get the battery! var battery = navigator.battery || navigator.webkitBattery || navigator.mozBattery;   // A few useful battery properties console.warn("Battery charging: ", battery.charging); // true console.warn("Battery level: ", battery.level); // 0.58 console.warn("Battery discharging time: ", battery.dischargingTime);   // Add a few event listeners battery.addEventListener("chargingchange", function(e) {   console.warn("Battery charge change: ", battery.charging); }, false);

10. Link Prefetching позволяет подсказать браузеру, документ по какой ссылке желательно предзагрузить
    
    Go

    <!-- full page --> <link rel="prefetch" href="http://davidwalsh.name/css-enhancements-user-experience" /> <!-- just an image --> <link rel="prefetch" href="http://davidwalsh.name/wp-content/themes/walshbook3/images/sprite.png" />

    1 2 3 4 5

    <!-- full page --> <link rel="prefetch" href="http://davidwalsh.name/css-enhancements-user-experience" />   <!-- just an image --> <link rel="prefetch" href="http://davidwalsh.name/wp-content/themes/walshbook3/images/sprite.png" />

Подробнее —
http://davidwalsh.name/html5-apis
и
http://davidwalsh.name/more-html5-apis

Similar Posts

None Found