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

太过爱你忘了你带给我的痛 2022-02-04 06:34 509阅读 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 条评论，509人围观）

还没有评论，来说两句吧...

相关阅读

相关 SecureCRT退出全屏

使用快捷键ALT+ENTER退出全屏（快捷键ALT+ENTER作用：进入全屏、退出全屏） ![退出全屏][70] [70]: https://img-blog.cs

迷南。/ 2023年10月17日 20:14/ 0 赞/ 40 阅读

相关 vue 全屏和退出全屏

html源码： <div id="allScreen" @click="showScreen" > <div >全屏内容 </div>

Dear 丶/ 2022年12月06日 15:48/ 0 赞/ 293 阅读

相关 360浏览器的极速模式和兼容模式的区别

想获取更多的前端技术-请专注公众号：胖梅web前端 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6L

我不是女神ヾ/ 2022年07月14日 05:37/ 0 赞/ 429 阅读

相关浏览器极速模式和兼容模式差异

在国内有一个比较特别的现象，很多网站对浏览器的兼容性比较差，特别是一些网上银行、公共服务网站等，虽然现在IE浏览器已经推出了IE11版本，但是这些网站目前只支持IE8及以下版本

Bertha 。/ 2022年06月09日 05:16/ 0 赞/ 262 阅读

相关 js 实现各浏览器全屏

现代浏览器包括ie11，可以直接用h5的全屏api实现低版本的IE需要通过ActiveX插件实现； //直接上代码 <!DOCTYPE html> <

深碍√TFBOYSˉ_/ 2022年05月31日 00:45/ 0 赞/ 240 阅读

相关如何在HTML中指定360的模式（极速、IE兼容、IE标准）

内核控制标签meta 如您是网站的开发者，可以通过在页面<head>标签中添加代码，来指定网站的模式若页面需默认用极速模式，增加标签：<meta name="render

红太狼/ 2022年05月12日 10:06/ 0 赞/ 397 阅读

相关 div的全屏与退出全屏

html按钮： <button onclick="showFull();">全屏</button> <button onclick="delFull();

淡淡的烟草味﹌/ 2022年03月28日 12:48/ 0 赞/ 390 阅读

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

function events() { //全屏 document.getElementById("btn").oncl

太过爱你忘了你带给我的痛/ 2022年02月04日 06:34/ 0 赞/ 510 阅读

相关原生js实现浏览器全屏和退出全屏

全屏模式 //W3C if (docElm.requestFullscreen) { docElm.requestFullscreen(

爱被打了一巴掌/ 2021年12月24日 19:41/ 0 赞/ 394 阅读

相关 HTML5--浏览器全屏操作、退出全屏、是否全屏

[HTML5--浏览器全屏操作、退出全屏、是否全屏][HTML5--] <!DOCTYPE html> <html lang="en"> <he

爱被打了一巴掌/ 2021年10月23日 14:12/ 0 赞/ 784 阅读