jQuery设置网页全屏功能

<img id="alarm-fullscreen-toggler" src="#" alt="全屏按钮" />

// 设置全屏：目前这个方法无法监听 ESC 键盘按键
$('#alarm-fullscreen-toggler').on('click', function (e) {
	var element = document.documentElement;		// 返回 html dom 中的root 节点 
	if(!$('body').hasClass('full-screen')) {
		$('body').addClass('full-screen');
		$('#alarm-fullscreen-toggler').addClass('active');
		// 判断浏览器设备类型
		if(element.requestFullscreen) {
			element.requestFullscreen();
		} else if (element.mozRequestFullScreen){	// 兼容火狐
			element.mozRequestFullScreen();
		} else if(element.webkitRequestFullscreen) {	// 兼容谷歌
			element.webkitRequestFullscreen();
		} else if (element.msRequestFullscreen) {	// 兼容IE
			element.msRequestFullscreen();
		}
	} else {			// 退出全屏
		console.log(document);
		$('body').removeClass('full-screen');
		$('#alarm-fullscreen-toggler').removeClass('active');
		//	退出全屏
		if(document.exitFullscreen) {
			document.exitFullscreen();
		} else if (document.mozCancelFullScreen) {
			document.mozCancelFullScreen();
		} else if (document.webkitCancelFullScreen) {
			document.webkitCancelFullScreen();
		} else if (document.msExitFullscreen) {
			document.msExitFullscreen();
		}
	}
});

全屏模式有两种：

1. F11 快捷键：把浏览器地址隐藏的全屏
2. h5的全屏 api (requestFullScreen)：设置需要全屏的 DOM 元素
   
   

document.body与document.documentElement的区别：
3. document.body：返回htmlDOM中的body节点，即
4. document.documentElement：返回html DOM 中的 root 节点，即