原文地址： 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允许开发者让浏览器进入全屏模式，当然前提是得到用户的许可。
// 处理全屏(需要全屏显示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();
}
};// 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 )将触发一个事件，而开发者可以监听这个事件并做一些处理.
// 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>标签,就可以 通过浏览器来拍摄 你漂亮的照片.
// 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 显然是用来查看移动设备电池电量等状态信息的:
// 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 允许网站在后台默默地预加载一些资源以便用户体验更顺畅。
<!-- 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之中调试出一些什么问题，很可能就是这个大小写的麻烦.
<!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>