另5个你不知道的HTML5接口API

来源：互联网发布：玩天龙八部网络延迟编辑：程序博客网时间：2024/05/01 05:25

原文地址： 5 More HTML5 APIs You Didn’t Know Existed

演示地址：全屏API Demo
原文日期： 2012年11月08日
翻译日期： 2013年08月13日

HTML5 已经给我们提供了许多好用的JavaScript以及HTML API.其中一些是我们期待了许多年的，而另外一些是为移动和桌面开发者准备的。不管这些API出于什么目的而推出，只要能帮我们更好地完成工作就是“好猫”。
前几天我发表了一篇名为： 5个你不知道的HTML5的接口的博文，希望能帮您更好地开发web应用。今天我将为您介绍另外5个少为人知的HTML5 API—— 希望您能发现他们的用途!

全屏API
强大的全屏API允许开发者让浏览器进入全屏模式，当然前提是得到用户的许可。

[javascript] view plaincopy
// 处理全屏(需要全屏显示DOM元素)  
function launchFullScreen(element) {  
  // 先检测最标准的方法  
  if(element.requestFullScreen) {  
    element.requestFullScreen();  
  } else if(element.mozRequestFullScreen) {  
    // 其次，检测Mozilla的方法  
    element.mozRequestFullScreen();  
  } else if(element.webkitRequestFullScreen) {  
    // if 检测 webkit的API  
    element.webkitRequestFullScreen();  
  }  
};  

[javascript] view plaincopy
// Launch fullscreen for browsers that support it!  
launchFullScreen(document.documentElement); // the whole page  
launchFullScreen(document.getElementById("videoElement")); // any individual element  

任意的DOM元素都可以切换至全屏状态，甚至CSS伪类还可以控制全屏模式下的不同样式。这个API特别适合JavaScript游戏的开发，尤其是像BananaBread这样的第一人称射击游戏!

页面可见性API
当用户切换浏览器标签的时候,页面可见性API(Page Visibility API, http://davidwalsh.name/page-visibility )将触发一个事件，而开发者可以监听这个事件并做一些处理.

[javascript] view plaincopy
// 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);  

如果使用恰当，在当前标签页不可见的时候，可以暂停一些消耗资源的任务(比如Ajax定时刷新,或者动画效果).

获取多媒体资源API
getUserMedia API 非常的有趣,这个API允许访问媒体设备，比如笔记本的摄像头。通过这个API以及<video>,<canvas>标签,就可以通过浏览器来拍摄你漂亮的照片.

[javascript] view plaincopy
// 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);  

期待在几年内有更多的应用通过浏览器和用户进行交互。

电池电量 API
电池电量 API 显然是用来查看移动设备电池电量等状态信息的:

[javascript] view plaincopy
// 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);  

获取电池信息，那么web应用程序就可以根据电量来决定是否执行一些耗电的操作.这不是一个开创性的API,但肯定有很多用处。

链接预加载API
Link prefetching 允许网站在后台默默地预加载一些资源以便用户体验更顺畅。

[html] view plaincopy
<!-- full page -->  
<link rel="prefetch" href="http://blog.csdn.net/renfufei" />  
<!-- just an image -->  
<link rel="prefetch" href="http://avatar.csdn.net/4/9/C/1_renfufei.jpg" />  

上面所介绍的5个API在未来几年肯定会得到广泛的应用，所以你越快熟悉他们，那你的Web应用程序就会抢占先机。花一些时间来深入研究这些API并尝试着集成到你的app中吧！

其中，全屏API的示例代码：

说明：在webkit中，直接是document相关的属性，那么 “Fullscreen”之中的screen全是小写的，而document.documentElement 则大小写均可，这是怪异的一个地方.另外，如果是一个方法，那么"FullScreen"中的S是大写的，这是一个诡异的不一致的地方，很可能是苹果时期的webkit遗留下来的bug。示例代码如下，在chrome之中调试通过,如果在IE或者Firefox之中调试出一些什么问题，很可能就是这个大小写的麻烦.

[html] view plaincopy
<!DOCTYPE html>  
<html>  
 <head>  
  <title> FullScreen API 演示</title>  
  <meta name="Generator" content="EditPlus">  
  <meta name="Author" content="renfufei@qq.com">  
  <meta name="Description" content="http://davidwalsh.name/more-html5-apis">  
  <script>  
    // 处理全屏(需要全屏显示DOM元素)  
    function launchFullScreen(element) {  
      // 先检测最标准的方法  
      if(element.requestFullScreen) {  
        element.requestFullScreen();  
      } else if(element.mozRequestFullScreen) {  
        // 其次，检测Mozilla的方法  
        element.mozRequestFullScreen();  
      } else if(element.webkitRequestFullScreen) {  
        // if 检测 webkit的API  
        element.webkitRequestFullScreen();  
      }  
    };  
    // 退出全屏,不用管具体是哪个元素，因为屏幕是唯一的。  
    function cancelFullscreen() {  
      if(document.cancelFullScreen) {  
        document.cancelFullScreen();  
      } else if(document.mozCancelFullScreen) {  
        document.mozCancelFullScreen();  
      } else if(document.webkitCancelFullScreen) {  
        document.webkitCancelFullScreen();  
      }  
    };  
    // 显示全屏信息  
    function dumpFullscreen() {  
        var d = document;  
        var fullE = null;  
        var fullEnable = "fullScreen is disable!";  
        if(d.fullScreenElement){  
            fullE = d.fullScreenElement;  
        } else if(d.mozFullScreenElement){  
            // 如果有问题，把mozFullscreenElement 改为 mozFullScreenElement,S大写  
            fullE = d.mozFullScreenElement;  
        } else if(d.webkitFullscreenElement){  
            // 本人的为chrome， Fullscreen 之中，s为小写。  
            fullE = d.webkitFullscreenElement;  
        }  
        // 如果有问题，请切换 fullScreen 中 s 的大小写。  
        if(d.fullScreenEnabled){  
            fullEnable = d.fullScreenEnabled;  
        } else if(d.mozFullScreenEnabled){  
            fullEnable = d.mozFullScreenEnabled;  
        } else if(d.webkitFullscreenEnabled){  
            // 注意 Fullscreen 的中间s大小写  
            fullEnable = d.webkitFullscreenEnabled;  
        }  
        //  
        if(window.console){  
            console.dir(fullE);  
        } else if(fullE){  
            alert(fullE.tagName);  
        } else {  
            alert("全屏元素是:"+fullE);  
        }  
        //  
        if(window.console){  
            console.info("允许全屏:"+fullEnable);  
        } else if(fullEnable){  
            alert("允许全屏:"+fullEnable);  
        } else {  
            alert("允许全屏:"+fullEnable);  
        }  
    };  
    // 设置事件监听，DOM内容加载完成，和jQuery的$.ready() 效果差不多。  
    window.addEventListener("DOMContentLoaded", function() {  
        // 获取DOM元素  
        var enterfull = document.getElementById("enterfull");  
        var quitfull = document.getElementById("quitfull");  
        var dumpfull = document.getElementById("dumpfull");  
              
        // 事件监听  
        enterfull.addEventListener("click", function() {  
            //   
            launchFullScreen(document.documentElement);  
        });  
        quitfull.addEventListener("click", function() {  
            //   
            cancelFullscreen();  
        });  
        dumpfull.addEventListener("click", function() {  
            //   
            dumpFullscreen();  
        });  
  
    }, false);  
    // 全屏事件Events  
    document.addEventListener("fullscreenchange", function(e) {  
      console.dir(e);  
    });  
    document.addEventListener("mozfullscreenchange", function(e) {  
      console.dir(e);  
    });  
    document.addEventListener("webkitfullscreenchange", function(e) {  
      console.dir(e);  
    });  
  </script>  
 </head>  
  
 <body>  
    
    <div>  
        <button id="enterfull">进入全屏</button><br/>  
        <button id="quitfull">退出全屏</button><br/>  
        <button id="dumpfull"> 查看全屏的DOM元素</button><br/>  
    </div>  
 </body>  
</html>  

0 0