今天有个小功能要写,就是利用 JS 代码来实现浏览器的全屏模式与退出浏览器全屏模式,自己网上也收集过一些相关的代码,分享出来,供大家参考一下。

js 实现浏览器全屏与退出全屏幕的方法

js函数代码:

<script>
//浏览器全屏
function fullScreen() {
    var el = document.documentElement;
    var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen;
    if (rfs) {
        rfs.call(el);
    } else if (typeof window.ActiveXObject !== "undefined") {
        //IE浏览器,模拟按下F11全屏
        var wscript = new ActiveXObject("WScript.Shell");
        if (wscript != null) {
            wscript.SendKeys("{F11}");
        }
    }
}
//浏览器退出全屏
function exitScreen() {
    var el = document;
    var cfs = el.cancelFullScreen || el.webkitCancelFullScreen || el.mozCancelFullScreen || el.exitFullScreen;
    if (cfs) {
        cfs.call(el);
    } else if (typeof window.ActiveXObject !== "undefined") {
        //IE浏览器,模拟按下F11键退出全屏
        var wscript = new ActiveXObject("WScript.Shell");
        if (wscript != null) {
            wscript.SendKeys("{F11}");
        }
    }
}
</script>

注意:

上面的函数必须要以 html 点击事件来触发,不能直接调用函数,否则会报以下的错误

Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture

大概的意思是:函数不能直接调用,要使用事件来触发。

函数事件调用方法:

html 代码:

<button onclick="fullScreen()">全屏</button>
<button onclick="exitScreen()">退出全屏</button>

js之切换全屏和退出全屏实现代码实例

如果你感觉上面例子中的代码,有些难懂,可以使用下这个示例中的代码,比较好理解,实现的效果是一样的。

js代码:

<script>
//浏览器全屏
function fullScreen() {
    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) {
        document.body.msRequestFullscreen();
    }
}
//浏览器退出全屏
function exitScreen() {
    if (document.exitFullscreen) {
        document.exitFullscreen();
    }
    else if (document.msExitFullscreen) {
        document.msExitFullscreen();
    }
    else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    }
    else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
    } else {
        window.parent.showTopBottom();
    }
}
</script>

调用方法:

<button onclick="fullScreen()">全屏</button>
<button onclick="exitScreen()">退出全屏</button>

关于全屏与退出全屏,各个浏览器的事件操作

操作浏览器代码
全屏W3Cde.requestFullscreen()
全屏CHROMEde.webkitRequestFullScreen()
全屏FIREFOXde.mozRequestFullScreen()
全屏IEde.msRequestFullscreen()



还原W3Cdocument.exitFullscreen()
还原CHROMEdocument.webkitCancelFullScreen()
还原FIREFOXdocument.mozCancelFullScreen()
还原IEdocument.msExitFullscreen()