全屏API可以控制浏览器的全屏显示,让一个Element节点(以及子节点)占满用户的整个屏幕。目前各大浏览器的最新版本都支持这个API(包括IE11),但是使用的时候需要加上浏览器前缀。
方法
requestFullscreen()
Element节点的requestFullscreen方法,可以使得这个节点全屏。
1 2 3 4 5 6 7 8 9 10 11 12 13 14
| function launchFullscreen(element) { if(element.requestFullscreen) { element.requestFullscreen(); } else if(element.mozRequestFullScreen) { element.mozRequestFullScreen(); } else if(element.msRequestFullscreen){ element.msRequestFullscreen(); } else if(element.webkitRequestFullscreen) { element.webkitRequestFullScreen(); } }
launchFullscreen(document.documentElement); launchFullscreen(document.getElementById("videoElement"));
|
放大一个节点时,Firefox和Chrome在行为上略有不同。Firefox自动为该节点增加一条CSS规则,将该元素放大至全屏状态,width: 100%; height: 100%
,而Chrome则是将该节点放在屏幕的中央,保持原来大小,其他部分变黑。为了让Chrome的行为与Firefox保持一致,可以自定义一条CSS规则。
1 2 3 4
| :-webkit-full-screen #myvideo { width: 100%; height: 100%; }
|
exitFullscreen()
document对象的exitFullscreen方法用于取消全屏。该方法也带有浏览器前缀。
1 2 3 4 5 6 7 8 9 10 11 12 13
| function exitFullscreen() { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); } }
exitFullscreen();
|
用户手动按下ESC键或F11键,也可以退出全屏键。此外,加载新的页面,或者切换tab,或者从浏览器转向其他应用(按下Alt-Tab),也会导致退出全屏状态。
属性
document.fullscreenElement
fullscreenElement属性返回正处于全屏状态的Element节点,如果当前没有节点处于全屏状态,则返回null。
1 2 3 4
| var fullscreenElement = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement;
|
document.fullscreenEnabled
fullscreenEnabled属性返回一个布尔值,表示当前文档是否可以切换到全屏状态。
1 2 3 4 5 6 7 8 9 10 11
| var fullscreenEnabled = document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled || document.msFullscreenEnabled;
if (fullscreenEnabled) { videoElement.requestFullScreen(); } else { console.log('浏览器当前不能全屏'); }
|
全屏事件
以下事件与全屏操作有关。
1 2 3 4 5 6 7
| document.addEventListener("fullscreenchange", function( event ) { if (document.fullscreenElement) { console.log('进入全屏'); } else { console.log('退出全屏'); } });
|
上面代码在发生fullscreenchange事件时,通过fullscreenElement属性判断,到底是进入全屏还是退出全屏。
全屏状态的CSS
全屏状态下,大多数浏览器的CSS支持:full-screen
伪类,只有IE11支持:fullscreen
伪类。使用这个伪类,可以对全屏状态设置单独的CSS属性。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
| :-webkit-full-screen { }
:-moz-full-screen { }
:-ms-fullscreen { }
:full-screen { }
:fullscreen { }
:-webkit-full-screen video { width: 100%; height: 100%; }
|
参考链接