## 全屏操作(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); ```