JavaScript全屏
在一些网页游戏或者大屏实时显示数据（列车、航空信息等）的网页里，我们们常常会需要全屏显示。
本文通过document的Fullscreen API（目前还有兼容性的问题），写了一个全屏小插件：
代码
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
28
29
30
var fullscreen = {
enter: function(element) {
element = element || document.documentElement;
element.requestFullscreen && element.requestFullscreen();
element.webkitRequestFullScreen && element.webkitRequestFullScreen();
element.mozRequestFullScreen && element.mozRequestFullScreen();
element.msRequestFullscreen && element.msRequestFullscreen();
},
exit: function() {
document.exitFullscreen && document.exitFullscreen();
document.webkitExitFullscreen && document.webkitExitFullscreen();
document.mozExitFullscreen && document.mozExitFullscreen();
document.msExitFullscreen && document.msExitFullscreen();
},
isFullscreen: function() {
return !!(
document.fullscreenElement ||
document.webkitFullscreenElement ||
document.mozFullScreenElement ||
document.msFullscreenElement
);
},
onFullscreenChange: function(callback) {
document.onfullscreenchange = callback;
document.onwebkitfullscreenchange = callback;
document.onmozfullscreenchange = callback;
document.onmsfullscreenchange = callback;
}
};
示例
1
2
3
setInterval(function() {
document.querySelector('#in-full-screen').innerText = fullscreen.inFullscreen();
}, 1000);
全屏状态：
API文档：
Element.requestFullscreen() 方法用于发出异步请求使元素进入全屏模式。1
Document.exitFullscreen() 方法用于让当前文档退出全屏模式（原文表述不准确，详见备注）。调用这个方法会让文档回退到上一个调用 Element.requestFullscreen()方法进入全屏模式之前的状态。2
The DocumentOrShadowRoot.fullscreenElement read-only property returns the Element that is currently being presented in full-screen mode in this document, or null if full-screen mode is not currently in use.
Although this property is read-only, it will not throw if it is modified (even in strict mode); the setter is a no-operation and it will be ignored.3
The Document interface’s onfullscreenchange property is an event handler for the fullscreenchange event that is fired immediately before a document transitions into or out of full-screen mode.4
本文属原创，转载请联系：jeff.doyle@foxmail.com
引用：
