你可能不知道的5 个强大的HTML5 API 函数

  HTML5提供了一些非常强大的JavaScript和HTML API,来帮助开发者构建精彩的桌面和移动应用程序。本文将介绍5个新型的API,希望对你的开发工作有所帮助。

  1.  全屏API(Fullscreen API)

  该API允许开发者以编程方式将Web应用程序全屏运行,使Web应用程序更像本地应用程序。

你可能不知道的5 个强大的HTML5 API 函数
// 找到适合浏览器的全屏方法  

function launchFullScreen(element)   {

  if(element.requestFullScreen)   {

    element.requestFullScreen();  

  } else if(element.mozRequestFullScreen) {

    element.mozRequestFullScreen();

  } else if(element.webkitRequestFullScreen)   {

    element.webkitRequestFullScreen();

  }

}

   

// 启动全屏模式  

launchFullScreen(document.documentElement);   // the whole page

launchFullScreen(document.getElementById("videoElement"));   // any individual element
你可能不知道的5 个强大的HTML5 API 函数


  2.  页面可见性API(Page Visibility API)

  该API可以用来检测页面对于用户的可见性,即返回用户当前浏览的页面或标签的状态变化。

你可能不知道的5 个强大的HTML5 API 函数
// 设置隐藏属性和可见改变事件的名称,属性需要加浏览器前缀   

// 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"; 

} 

   

// 添加一个标题改变的监听器   

document.addEventListener(visibilityChange,   function(e) { 

  // 开始或停止状态处理 

}, false);
你可能不知道的5 个强大的HTML5 API 函数

 

  3.  getUserMedia API

  该API允许Web应用程序访问摄像头和麦克风,而无需使用插件。

 

你可能不知道的5 个强大的HTML5 API 函数
// 设置事件监听器   

window.addEventListener("DOMContentLoaded",   function() { 

  // 获取元素 

  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);  

    }; 

   

  // 设置video监听器 

  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);
你可能不知道的5 个强大的HTML5 API 函数

  4.  电池API(Battery API)

  这是一个针对移动设备应用程序的API,主要用于检测设备电池信息。

你可能不知道的5 个强大的HTML5 API 函数
var battery =   navigator.battery || navigator.webkitBattery || navigator.mozBattery; 

   

// 电池属性   

console.warn("Battery charging:   ", battery.charging); // true 

console.warn("Battery level: ",   battery.level); // 0.58 

console.warn("Battery discharging   time: ", battery.dischargingTime); 

   

// 添加事件监听器   

battery.addEventListener("chargingchange",   function(e) { 

  console.warn("Battery   charge change: ", battery.charging); 

}, false);
你可能不知道的5 个强大的HTML5 API 函数

  5.  Link Prefetching

  预加载网页内容,为浏览者提供一个平滑的浏览体验。

  

你可能不知道的5 个强大的HTML5 API 函数
<!-- full page -->

<link rel="prefetch" href="http://davidwalsh.name/css-enhancements-user-experience" /> 

   

<!-- just an image -->
你可能不知道的5 个强大的HTML5 API 函数

你可能不知道的5 个强大的HTML5 API 函数

上一篇:使用plus.io创建文件并写入内容


下一篇:win7语音识别开发(sapi)