## 全屏操作（FullScreen API） 全屏API可以控制浏览器全屏显示。 **8.1 requestFullscreen()** Element节点的requestFullscreen方法，可以使得这个节点全屏。 ``` function openFullscreen(elem){ if (elem.requestFullscreen) { elem.requestFullscreen(); } else if (elem.mozRequestFullScreen) { elem.mozRequestFullScreen(); } else if (elem.webkitRequestFullscreen) { elem.webkitRequestFullscreen(); } } openFullscreen(document.documentElement); //整个页面全屏 openFullscreen(document.getElementById('videoElement'); //使播放器全屏 ``` 运行到这里，Gecko 与 WebKit 两个实现中出现了一个值得注意的区别： Gecko 会为元素自动添加 CSS 使其伸展以便铺满屏幕： "width: 100%; height: 100%"。 WebKit 则不会这么做；它会让全屏的元素以原始尺寸居中到屏幕中央，其余部分变为黑色。 所以为了在 WebKit 下也达到与 Gecko 同样的全屏效果，你需要手动为元素增加 CSS 规则"width: 100%; height: 100%;"： ``` /* html */ :-webkit-full-screen {} :-moz-fullscreen {} :fullscreen {} :-webkit-full-screen video { width: 100%; height: 100%; } ``` **8.2 exitFullscreen()** Document对象的exitFullscreen方法用于取消全屏。 ``` function closeFullscreen(){ if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.webkitCancelFullScreen) { document.webkitCancelFullScreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } } closeFullscreen() ``` 用户手动按下ESC键或F11键，也可以退出全屏键。此外，加载新的页面，或者切换tab，或者从浏览器转向其他应用（按下Alt-Tab），也会导致退出全屏状态。 **8.3 全屏属性和事件** **8.3.1 属性** document.fullscreenElement: 当前处于全屏状态的元素 element. document.fullscreenEnabled: 标记 fullscreen 当前是否可用. ``` var fullscreenElement = document.fullscreenElement || document.mozFullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement; var fullscreenEnabled = document.fullscreenEnabled || document.mozFullscreenEnabled || document.webkitFullscreenEnabled || document.msFullscreenEnabled; ``` **8.3.2 全屏事件** fullscreenchange事件：浏览器进入或离开全屏时触发。 fullscreenerror事件：浏览器无法进入全屏时触发，可能是技术原因，也可能是用户拒绝。 ``` document.addEventListener('fullscreenchange',function(){ if(document.fullscreenElement){ //进入全屏 }else{ //退出全屏 } },false); ```