JavaScript控制全屏，监听退出全屏事件-蒲公英云

JavaScript控制全屏，监听退出全屏事件

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

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

//全屏功能
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}");
        }
    }
}

那上面的方法怎么用呢？退出全屏好说，直接调用上面的方法：

exitFull();

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

requestFullScreen(document.documentElement);

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

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

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

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

//监听退出全屏事件
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;
}