文章目录

本文转自:https://www.cnblogs.com/yiven/p/7885528.html

我们有时候可能需要自定义一些全屏事件,这个时候就要依靠JavaScript提供的全屏方法,废话不多说,直接上代码。

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
31
32
//全屏功能
function requestFullScreen(element) {
// 判断各种浏览器,找到正确的方法
var requestMethod = element.requestFullScreen || //W3C
element.webkitRequestFullScreen || //FireFox
element.mozRequestFullScreen || //Chrome等
element.msRequestFullScreen; //IE11
if (requestMethod) {
requestMethod.call(element);
} else if (typeof window.ActiveXObject !== "undefined") { //for Internet Explorer
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
}
//退出全屏 判断浏览器种类
function exitFull() {
// 判断各种浏览器,找到正确的方法
var exitMethod = document.exitFullscreen || //W3C
document.mozCancelFullScreen || //FireFox
document.webkitExitFullscreen || //Chrome等
document.webkitExitFullscreen; //IE11
if (exitMethod) {
exitMethod.call(document);
} else if (typeof window.ActiveXObject !== "undefined") { //for Internet Explorer
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
}

那上面的方法怎么用呢?退出全屏好说,直接调用上面的方法:

1
exitFull();

进入全屏,需要传参,可用如下的方法整个网页进入全屏:

1
requestFullScreen(document.documentElement);

我们可以将上面这句代码放在相应的事件函数中,直接执行就可以了。

那如果希望某些元素全屏,我们就可以用下面的这种方式:

1
2
3
4
5
6
7
document.getElementById("btn").onclick = function () {
var elem = document.getElementById("fullScreen");
elem.style.width = "100%";
elem.style.height = "100%";
elem.style.overflowY = "scroll";
requestFullScreen(elem); // 某个页面元素
};

现在有了全屏和退出全屏的事件,那如果我们还想要监听退出全屏事件,然后做一些事件处理呢,当然也有监听方法啦。

1
2
3
4
5
6
7
8
9
10
11
12
13
//监听退出全屏事件
window.onresize = function () {
if (!checkFull()) {
//要执行的动作
alert(111)
}
}
function checkFull() {
var isFull = document.fullscreenEnabled || window.fullScreen || document.webkitIsFullScreen || document.msFullscreenEnabled;
//to fix : false || undefined == undefined
if (isFull === undefined) { isFull = false; }
return isFull;
}
文章目录