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

原文地址： 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>