专栏首页山河木马js触发全屏事件

js触发全屏事件

//全屏
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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 浏览器后退不刷新页面的解决办法

    在开发微信的H5页面的时候,发现ISO的微信内置浏览器后退不刷新了,然而业务实现需要刷新。

    山河木马
  • H5案例分享:微信视频播放全屏问题(转)

       在ios和安卓手机里的微信下播放视频时,会遇到不少问题,例如需要手动点击,视频才会播放,并且视频会跳出微信框,出现控制条,如果视频不是腾讯视频,播放完毕会...

    山河木马
  • jquery checkbox反复调用attr('checked', true/false)只有第一次生效

    山河木马
  • js页面全屏/退出全屏

      在做前端PC端项目中,我们经常会遇到让页面全屏的需求。大多情况下,这样可以使得用户在该页面更加专注,屏蔽掉该页面之外的干扰。

    流眸
  • 《动物魔法学校》儿童学编程Scratch之“外观”部分

    导读:本文通过一个案例《动物魔法学校》来学习Scratch语言的“外观”部分。之后通过一系列其他功能的综合运用对作品功能进行了扩展。

    一石匠人
  • Python读取Excel文件统计演员参演电影

    假设有个Excel 2007文件“电影导演演员.xlsx”,其中有三列分别为电影名称、导演和演员列表(同一个电影可能会有多个演员,每个演员姓名之间使用逗号分隔)...

    Python小屋屋主
  • numpy~运算符和Boolean类型变量

    DrawSky
  • 快速入门Tableau系列 | Chapter11【范围-线图、倾斜图】

    范围-线图将整体数据的部分统计特征(均值、最大值、最小值等)展现在图形中,既可以说明群体特征,还可以展示个体信息,更可以比较个体与整体的相关关系。 制作步骤:...

    不温卜火
  • 从“菜鸟”码农到“资深”架构师,我到底经历了什么?

    这些疑问有些来自于跟小伙伴的交流,有些是我的自问自答,有些到现在也想不清楚,这篇文章就来写一写这些问题。

    凯哥Java
  • 如何成为架构师?7 个关键的思考、习惯和经验

    工作了挺久,发现有个挺有意思的现象,从程序员、高级程序员,到现在挂着架构师、专家之类的头衔,伴随着技术和能力的提高,想不明白的事情反而越来越多了。这些疑问有些来...

    Java高级架构

扫码关注云+社区

领取腾讯云代金券