javascript 如何实现全屏与退出全屏的方法好代码教程

今天有个小功能要写，就是利用 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>

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

以上就是javascript 如何实现全屏与退出全屏的方法好代码教程。愿我们上半年所有的遗憾，都是下半年惊喜的铺垫，加油吧。更多关于javascript 如何实现全屏与退出全屏的方法好代码教程请关注haodaima.com其它相关文章！