HTML5提供了一些非常强大的JavaScript和HTML API

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

 

　　1.  全屏API（Fullscreen API）

 

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

 

 

//

 找到适合浏览器的全屏方法

 

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 inpidual element

　　教程 / 演示

 

　　2.  页面可见性API（Page Visibility API）

 

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

　　教程 / 演示

 

　　3.  getUserMedia API

 

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

 

 

//

 设置事件监听器

 

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

　　教程 / 演示

 

　　4.  电池API（Battery API）

 

　　这是一个针对移动设备应用程序的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.  Link Prefetching

 

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

 

 

<!--

 full page -->

 

<link

 

rel="prefetch"

 

href="https://davidwalsh.name/css-enhancements-user-experience"

 

/>

 

  

 

<!--

 just an image -->

 

<link

 

rel="prefetch"

 

href=/uploadfile/2013/1106/20131106041859193.png"

 

/>