HTML5全屏API

这几天一直在写全屏查看的功能，没想到HTML5中直接提供了全屏功能的API，看来之后事先应该先查一下HTML5有没有提供相应的API。

// 开启全屏，必须手动触发（好比click），不能自动全屏，参数为被全屏的元素
function launchFullScreen(element) {
 if(element.requestFullScreen) {
  element.requestFullScreen();
 }else if(element.mozRequestFullScreen) { //兼容moz
  element.mozRequestFullScreen();
 }else if(element.webkitRequestFullScreen) { //兼容webkit
  element.webkitRequestFullScreen();
 }
}
	//退出全屏
function exitFullscreen() {
 if(document.exitFullscreen) {
  document.exitFullscreen();
 }else if(document.mozCancelFullScreen) { //兼容moz
  document.mozCancelFullScreen();
 }else if(document.webkitExitFullscreen) { //兼容webkit
  document.webkitExitFullscreen();
 }
}

另外开启全屏和退出全屏的监听事件，能够写一些回调函数

document.addEventListener("fullscreenchange", function(e) {
  console.log("fullscreenchange", e);
});
document.addEventListener("mozfullscreenchange", function(e) {
  console.log("mozfullscreenchange ", e);
});
document.addEventListener("webkitfullscreenchange", function(e) {
  console.log("webkitfullscreenchange", e);
});
document.addEventListener("msfullscreenchange", function(e) {
  console.log("msfullscreenchange", e);
});

开启全屏和退出全屏所返回的event对象是同样的，能够用下面的方法区别开启和退出全屏的两种状态：

var fullscreenState = null;
document.addEventListener("fullscreenchange", function(e) {
		if(fullscreenState == 0){
			console.log("退出全屏");
			fullscreenstate = 1;
		}else{
			console.log("开启全屏");
			fullscreenState = 0
		}
});

被全屏的元素必须是最外层window对象中的元素，好比iframe中的元素就没法被全屏。