博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js触发全屏事件
阅读量:7000 次
发布时间:2019-06-27

本文共 3889 字,大约阅读时间需要 12 分钟。

hot3.png

//全屏function fullScreen() {    //var element= document.documentElement; //若要全屏页面中div,var element= document.getElementById("divID");    var element= document.getElementById("fullScreen_panorama");    //IE 10及以下ActiveXObject    if (window.ActiveXObject)    {        var WsShell = new ActiveXObject('WScript.Shell');        WsShell.SendKeys('{F11}');        //写全屏后的执行函数    }    //HTML W3C 提议    else if(element.requestFullScreen) {        element.requestFullScreen();        //写全屏后的执行函数    }    //IE11    else if(element.msRequestFullscreen) {        element.msRequestFullscreen();        //写全屏后的执行函数    }    // Webkit (works in Safari5.1 and Chrome 15)    else if(element.webkitRequestFullScreen ) {        element.webkitRequestFullScreen();        //写全屏后的执行函数    }    // Firefox (works in nightly)    else if(element.mozRequestFullScreen) {        element.mozRequestFullScreen();        //写全屏后的执行函数    }}//退出全屏function fullExit(){    //var element= document.documentElement;//若要全屏页面中div,var element= document.getElementById("divID");    var element= document.getElementById("fullScreen_panorama");    //IE ActiveXObject    if (window.ActiveXObject)    {        var WsShell = new ActiveXObject('WScript.Shell');        WsShell.SendKeys('{F11}');        //写退出全屏后的执行函数    }    //HTML5 W3C 提议    else if(element.requestFullScreen) {        document.exitFullscreen();        //写退出全屏后的执行函数    }    //IE 11    else if(element.msRequestFullscreen) {        document.msExitFullscreen();        //写退出全屏后的执行函数    }    // Webkit (works in Safari5.1 and Chrome 15)    else if(element.webkitRequestFullScreen ) {        document.webkitCancelFullScreen();        //写退出全屏后的执行函数    }    // Firefox (works in nightly)    else if(element.mozRequestFullScreen) {        document.mozCancelFullScreen();        //写退出全屏后的执行函数    }}

此方法亲身实践过,有效

 

下面这个方法未实践,不知是否有效

让用户端JS触发指的就是让用JS监听用户的操作事件,通过JS程序去实现F11全屏。这个事件可以是一个按钮的点击事件,当然也可以是键盘事件,比如用户按下F11。

    1.F11键盘事件触发
  当用户按下F11事件,浏览器为触发自身全屏功能,这个过程我们一般是不可控制的,即使是监听了F11的键盘事件,退出全屏的时候,我们也捕捉不到退出全屏触发的事件。所以,我们就用程序自己去实现F11的功能,首先需要禁用浏览器默认的事件动作。
 

1 $(document).on('keydown', function (e) { 2      var e = event || window.event || arguments.callee.caller.arguments[0]; 3      if(e && e.keyCode == 122){//捕捉F11键盘动作 4        e.preventDefault();  //阻止F11默认动作 5        var el = document.documentElement; 6        var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen;//定义不同浏览器的全屏API      //执行全屏 7        if (typeof rfs != "undefined" && rfs) { 8              rfs.call(el); 9        } else if(typeof window.ActiveXObject != "undefined"){10              var wscript = new ActiveXObject("WScript.Shell");11              if (wscript!=null) {12                  wscript.SendKeys("{F11}");13              }14        }      //监听不同浏览器的全屏事件,并件执行相应的代码15        document.addEventListener("webkitfullscreenchange", function() {//16            if (document.webkitIsFullScreen) {17                 //全屏后要执行的代码18            }else{19                 //退出全屏后执行的代码20          }21        }, false);22 23        document.addEventListener("fullscreenchange", function() {24            if (document.fullscreen) {25                 //全屏后执行的代码26            }else{27                 //退出全屏后要执行的代码28            }29        }, false);30 31        document.addEventListener("mozfullscreenchange", function() {32            if (document.mozFullScreen) {33                 //全屏后要执行的代码34            }else{35                 //退出全屏后要执行的代码36            }37        }, false);38 39        document.addEventListener("msfullscreenchange", function() {40            if (document.msFullscreenElement) {41                 //全屏后要执行的代码42            }else{43                 //退出全屏后要执行的代码44            }45        }, false)46     }47 }

参考文献:http://www.webhek.com/post/fullscreen.html

                http://www.cnblogs.com/scot/p/5552051.html

转载于:https://my.oschina.net/u/2306318/blog/876088

你可能感兴趣的文章
H2 数据库
查看>>
开始学习Functional Programming
查看>>
Redis 和 Memcached 的区别
查看>>
jenkins和docker 在docker里运行jenkins
查看>>
【PHP升级】CentOS6.3编译安装 PHP5.4.38
查看>>
Lua 迭代器与closure
查看>>
mybatis_helloworld(2)_源码
查看>>
Atitit godaddy 文件权限 root权限设置
查看>>
完整部署CentOS7.2+OpenStack+kvm 云平台环境(3)--为虚拟机指定固定ip
查看>>
用rfkill命令管理蓝牙和wifi
查看>>
BLE 广播数据解析
查看>>
Maven初学
查看>>
Oracle用户密码过期和用户被锁解决方法【转】
查看>>
Android 解决Android的TextView和EditText换行问题
查看>>
CSS效果集锦(持续更新中)
查看>>
通过重建Hosting系统理解HTTP请求在ASP.NET Core管道中的处理流程[中]:管道如何处理请求...
查看>>
Eigen教程(9)
查看>>
无线网卡与本地连接不能同时使用&一机多网络的优先级设置
查看>>
解决Apache长时间占用内存大的问题,Apache 内存优化方法
查看>>
PHP运行环境之IIS FastCGI 进程意外退出解决办法
查看>>