全屏事件

前两天公司项目上需要用一下【进入全屏事件】，发现坑还是蛮多的，好在网上的资料也很多。在此做一个小小的总结吧。主要是几个Api。

1. 进入全屏

function fullScreen(element) {
	if(element.requestFullScreen) {
		element.requestFullScreen();
			console.log("通用的进入全屏")
		} else if(element.webkitRequestFullScreen) {
			element.webkitRequestFullScreen();
			console.log("webkit进入全屏")
		} else if(element.mozRequestFullScreen) {
			element.mozRequestFullScreen();
			console.log("火狐进入全屏")
		} else if(element.msRequestFullscreen) {
			element.msRequestFullscreen();
		console.log("IE进入全屏")
		}			
}

​ 该方法需要制定一个element参数。比如：我的项目中是要让一个视频全屏播放，那么这个element参数就是我的video标签。以此类推。

​ 当然也可以看到，不同的浏览器对该接口的支持标准也不一样。这也是做这个总结的主要原因。

2. 退出全屏

var exitFullScreen = function() {
	if(document.exitFullscreen) {
		document.exitFullscreen();
		console.log("通用的退出全屏")
	} else if(document.msExitFullscreen) {
		document.msExitFullscreen();
		console.log("IE退出全屏")
	} else if(document.mozCancelFullScreen) {
		document.mozCancelFullScreen();
		console.log("火狐退出全屏")
	} else if(document.webkitCancelFullScreen) {
		document.webkitCancelFullScreen();
		console.log("webkit退出全屏")
	}
}

退出全屏的API和进入全屏差不多，也是各个浏览器“各自为战”，不尽相同。

与【进入全屏】不同的地方是：不需要传入参数，对象是document

监听进入或退出全屏

var listenScreenChange = function() {
document.addEventListener("fullscreenchange", function() {
		console.log("通用的全屏监听")
}, false);
				document.addEventListener("mozfullscreenchange", function() {
	console.log("火狐全屏监听")
}, false);
				document.addEventListener("webkitfullscreenchange", function() {
	console.log("webkit全屏监听")
}, false);
				document.addEventListener("MSFullscreenChange", function() {
	console.log("IE全屏监听")
}, false);
}

此API需要注意：

• IE的全屏监听是MSFullscreenChange,其中的MS和Change的首字母都是需要大写的。

3. 全屏样式

<style type="text/css">
			
	div:-webkit-full-screen {
		background: blue;
	}
			
	div:-moz-full-screen {
		background: blue;
	}
			
	div:-ms-fullscreen {
		background: blue;
	}
			
	div:full-screen {
		background: blue;
	}
			
	div:fullscreen {
		background: blue;
	}
			/* deeper elements */
			
	:-webkit-full-screen video {
		width: 100%;
		height: 100%;
	}
			/* styling the backdrop*/
			
	::backdrop {
		/* properties */
	}
			
	::-ms-backdrop {
		/* properties */
	}
</style>

这是专门针对进入全屏后单独设置的样式。

4. 总结

这些API使用起来还是很简单的，拿来就能用，只要注意不要将大小写写错就好。

还需要注意的几点：

• 这些方法只对IE11有用，低版本就算了。edge浏览器使用的是带webkit前缀的API。
• 进入全屏后，按esc键也可以退出全屏，但是不会触发上面的【退出全屏】事件。但是会触发【退出全屏】的监听事件。
• 在此处的【进入全屏】说的狭义上的全屏，即只是把你当作参数传入的某个节点以全屏显示。其余的element则不会显示在页面上。而我们广义上的全屏是：页面中的所有元素都以全屏显示，这时只要将html节点以参数传入即可。即：

var html = document.querySelector('html');
fullScreen(html);