全屏、退出全屏---兼容各浏览器 IE Chrom 火狐 360极速模式/兼容模式

JS 专栏收录该内容
17 篇文章 0 订阅
    function events() {
        //全屏
        document.getElementById("btn").onclick = function () {
            var elem = document.getElementById("box");
            if (!flag) {
                requestFullScreen(elem);
            } else {
                exitFull(elem)
            }
        }
        //全屏或者退出全屏会触发
        document.addEventListener("fullscreenchange", function (e) {
            flag = !flag; //是否为全屏
            if (flag) {
                //设置样式
            } else {
                //设置样式
            }
        });
        document.addEventListener("mozfullscreenchange", function (e) {
            flag = !flag; //是否为全屏
            if (flag) {
                //设置样式
            } else {
                //设置样式
            }
        });
        document.addEventListener("webkitfullscreenchange", function (e) {
            flag = !flag; //是否为全屏
            if (flag) {
                //设置样式
            } else {
                //设置样式
            }
        });
        document.addEventListener("MSFullscreenChange", function (e) {
            flag = !flag; //是否为全屏
            if (flag) {
                //设置样式
            } else {
                //设置样式
            }
        });
    }
    //全屏
    function requestFullScreen(element) {
        //某个元素有请求
        var requestMethod = element.requestFullScreen
            || element.webkitRequestFullScreen //谷歌
            || element.mozRequestFullScreen  //火狐
            || element.msRequestFullscreen; //IE11
        if (requestMethod) {
            requestMethod.call(element);   //执行这个请求的方法
        } else if (typeof window.ActiveXObject !== "undefined") {  //window.ActiveXObject判断是否支持ActiveX控件
            //这里其实就是模拟了按下键盘的F11,使浏览器全屏
            var wscript = new ActiveXObject("WScript.Shell"); //创建ActiveX
            if (wscript !== null) {    //创建成功
                wscript.SendKeys("{F11}");//触发f11
            }
        }
    }
    //退出全屏
    function exitFull(element) {
        var exitMethod = document.exitFullscreen || //W3C
            document.mozCancelFullScreen || //FireFox
            document.webkitExitFullScreen || //Chrome等
            document.webkitExitFullscreen || //360极速模式
            document.msExitFullscreen; //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}");
            }
        }
    }

注意大小写

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值