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

雨点打透心脏的1/2处 2022-05-19 13:38 1308阅读 0赞

> 本文转自：[https://www.cnblogs.com/yiven/p/7885528.html][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;
    }

[https_www.cnblogs.com_yiven_p_7885528.html]: https://www.cnblogs.com/yiven/p/7885528.html