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;
    }