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

实现方案

代码语言：javascript复制

//进入全屏
function requestFullScreen(de) {
    if(de.requestFullscreen){
        //W3C
        de.requestFullscreen();
    }else if (de.mozRequestFullScreen){
        //FIREFOX
        de.mozRequestFullScreen();
    }else if (de.webkitRequestFullScreen){
        //CHROME
        de.webkitRequestFullScreen();
    }else if (de.msRequestFullscreen){
        //MSIE
        de.msRequestFullscreen();
    }else if(element.oRequestFullscreen){
        element.oRequestFullscreen();
    }else{
        var docHtml = document.documentElement;
        var docBody = document.body;
        var videobox = document.getElementById('playerBox');
        var cssText = 'width:100%;height:100%;overflow:hidden;';
        docHtml.style.cssText = cssText;
        docBody.style.cssText = cssText;
        videobox.style.cssText = cssText ';' 'margin:0px;padding:0px;';
        document.IsFullScreen = true;
    }
}
//退出全屏
function exitFullscreen(de) {
    if (de.exitFullscreen) {
        //W3C
        de.exitFullscreen();
    }else if(de.mozCancelFullScreen){
        //FIREFOX
        de.mozCancelFullScreen();
    }else if(de.webkitCancelFullScreen){
        //CHROME
        de.webkitCancelFullScreen();
    }else if(de.msExitFullscreen){
        //MSIE
        de.msExitFullscreen();
    }else if(de.oRequestFullscreen){
        de.oCancelFullScreen();
    }else{
        var docHtml = document.documentElement;
        var docBody = document.body;
        var videobox = document.getElementById('playerBox');
        docHtml.style.cssText = "";
        docBody.style.cssText = "";
        videobox.style.cssText = "";
        document.IsFullScreen = false;
    }
}

上面的方案，一堆if…else…，看起来实在不爽，下面是根据大神方案优化后的方案

代码语言：javascript复制

//全屏功能
document.getElementById("ck_buts").onclick = function() {
    var elem = document.getElementById("dashboard_id");
    elem.style.width = "100%";
    elem.style.height = "100%";
    elem.style.overflowY = "scroll";
    requestFullScreen(elem); // 某个页面元素
    //requestFullScreen(document.documentElement); // 整个网页
};
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}");
        }
    }
}

监听退出全屏事件

代码语言：javascript复制

//监听退出全屏事件
window.onresize = function() {
    if (!checkFull()) {
        //要执行的动作
        $("#dashboard_id").removeClass('expand').addClass('contract');//这里捡个懒，直接用JQ来改className
    }
}
function checkFull() {
    var isFull = document.fullscreenEnabled || window.fullScreen || document.webkitIsFullScreen || document.msFullscreenEnabled;
    //to fix : false || undefined == undefined
    if (isFull === undefined) {isFull = false;}
    return isFull;
}/* Your code... */

本文采用 「CC BY-NC-SA 4.0」创作共享协议，转载请标注以下信息：

原文出处：Yiiven https://cloud.tencent.com/developer/article/2193092

事件 协议 优化

0 人点赞