JS实现全屏的方法合集

$g.screen = {
    // 在全屏与非全屏之间来回切换
    toggleFullScreen(d) {
        this.isFullScreen() ? this.exitFullScreen() : this.fullScreen();
    },
    /**实现F11全屏效果*/
    fullScreen() {
        if (this.isFullScreen()) return;
        var docElm = document.documentElement;
        /*W3C*/
        if (docElm.requestFullscreen) {
            docElm.requestFullscreen();
        }/*FireFox */ else if (docElm.mozRequestFullScreen) {
            docElm.mozRequestFullScreen();
        }/*Chrome等 */ else if (docElm.webkitRequestFullScreen) {
            docElm.webkitRequestFullScreen();
        }/*IE11*/ else if (docElm.msRequestFullscreen) {
            docElm.msRequestFullscreen();
        }
    },
    /**退出F11全屏*/
    exitFullScreen() {
        if (!this.isFullScreen()) return;
        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
        } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        }
    },
    /**判断是否全屏*/
    isFullScreen() {
        return document.fullscreenElement || document.msFullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement ? true : false;
    },
    /**判断全屏模式是否是可用*/
    isFullscreenEnabled() {
        return document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled || document.msFullscreenEnabled || false;
    },
    /**判断整个页面被一个标签铺满*/
    isFullscreenForNoScroll() {
        var explorer = window.navigator.userAgent.toLowerCase();
        if (explorer.indexOf("chrome") > -1) {/*webkit*/
            return (document.body.scrollHeight === window.screen.height && document.body.scrollWidth === window.screen.width);
        } else {/*IE 9+  fireFox*/
            return (window.outerHeight === window.screen.height && window.outerWidth === window.screen.width);
        }
    },
    /**实现局部div、dom元素全屏*/
    fullScreenForDOM(sel) {
        typeof sel == "string" && (sel = document.querySelector(sel));
        /**el是具体的dom元素*/var rfs = sel.requestFullScreen || sel.webkitRequestFullScreen || sel.mozRequestFullScreen || sel.msRequestFullScreen, wscript;
        if (typeof rfs != "undefined" && rfs) {
            rfs.call(sel);
            return;
        }
        if (typeof window.ActiveXObject != "undefined") {
            wscript = new ActiveXObject("WScript.Shell");
            if (wscript) {
                wscript.SendKeys("{F11}");
            }
        }
    },
    exitFullScreenForDOM(sel) {
        typeof sel == "string" && (sel = document.querySelector(sel));
        /**el是具体的dom元素*/var el = document, cfs = sel.cancelFullScreen || sel.webkitCancelFullScreen || sel.mozCancelFullScreen || sel.exitFullScreen, wscript;
        if (typeof cfs != "undefined" && cfs) {
            cfs.call(el);
            return;
        }
        if (typeof window.ActiveXObject != "undefined") {
            wscript = new ActiveXObject("WScript.Shell");
            if (wscript != null) {
                wscript.SendKeys("{F11}");
            }
        }
    }
};