HTML5全屏API

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

1	// 开启全屏，必须手动触发（比如click），不能自动全屏，参数为被全屏的元素
2function launchFullScreen(element) {
3 if(element.requestFullScreen) {
4  element.requestFullScreen();
5 }else if(element.mozRequestFullScreen) { //兼容moz
6  element.mozRequestFullScreen();
7 }else if(element.webkitRequestFullScreen) { //兼容webkit
8  element.webkitRequestFullScreen();
9 }
10}
11	//退出全屏
12function exitFullscreen() {
13 if(document.exitFullscreen) {
14  document.exitFullscreen();
15 }else if(document.mozCancelFullScreen) { //兼容moz
16  document.mozCancelFullScreen();
17 }else if(document.webkitExitFullscreen) { //兼容webkit
18  document.webkitExitFullscreen();
19 }
20}

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

1document.addEventListener("fullscreenchange", function(e) {
2  console.log("fullscreenchange", e);
3});
4document.addEventListener("mozfullscreenchange", function(e) {
5  console.log("mozfullscreenchange ", e);
6});
7document.addEventListener("webkitfullscreenchange", function(e) {
8  console.log("webkitfullscreenchange", e);
9});
10document.addEventListener("msfullscreenchange", function(e) {
11  console.log("msfullscreenchange", e);
12});

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

1var fullscreenState = null;
2document.addEventListener("fullscreenchange", function(e) {
3		if(fullscreenState == 0){
4			console.log("退出全屏");
5			fullscreenstate = 1;
6		}else{
7			console.log("开启全屏");
8			fullscreenState = 0
9		}
10});

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