JS实现网页全屏和退出

最新推荐文章于 2024-07-19 15:49:07 发布

98年的香奈儿

最新推荐文章于 2024-07-19 15:49:07 发布

阅读量1.8k

点赞数 1

分类专栏： web 文章标签： seaJS 全屏显示 jsp

web 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

1.html两个按钮，全屏、退出全屏。

<li>
    <button class="btn btn-sm btn-info FullScreen-btn" value="FullScreen" type="button" >全屏</button>
</li>
<li>
    <button class="btn btn-sm btn-info ExitFullScreen-btn" value="ExitFullScreen" type="button" >退出全屏</button>
</li>

2.JS

//全屏显示
$(".FullScreen-btn").click(function(el){
    var el = document.documentElement;
    var rfs = el.requestFullScreen || el.webkitRequestFullScreen ||
        el.mozRequestFullScreen || el.msRequestFullScreen;
    if(typeof rfs != "undefined" && rfs) {
        rfs.call(el);
    } else if(typeof window.ActiveXObject != "undefined") {
        //for IE，这里其实就是模拟了按下键盘的F11，使浏览器全屏
        var wscript = new ActiveXObject("WScript.Shell");
        if(wscript != null) {
            wscript.SendKeys("{F11}");
        }
    }
});

//退出全屏
$(".ExitFullScreen-btn").click(function(el){
    var el = document;
    var cfs = el.cancelFullScreen || el.webkitCancelFullScreen ||
        el.mozCancelFullScreen || el.exitFullScreen;
    if(typeof cfs != "undefined" && cfs) {
        cfs.call(el);
    } else if(typeof window.ActiveXObject != "undefined") {
        //for IE，这里和fullScreen相同，模拟按下F11键退出全屏
        var wscript = new ActiveXObject("WScript.Shell");
        if(wscript != null) {
            wscript.SendKeys("{F11}");
        }
    }
});