JS控制全屏，監聽退出全屏事件

實現方案

//進入全屏
    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...，看起來實在不爽，下面是根據大神方案優化后的方案

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

    }

 監聽退出全屏事件

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