zoukankan      html  css  js  c++  java
  • 使用js来执行全屏

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

    $(document).on('keydown', function (e) {
         var e = event || window.event || arguments.callee.caller.arguments[0];
         if(e && e.keyCode == 122){//捕捉F11键盘动作
           e.preventDefault();  //阻止F11默认动作
           var el = document.documentElement;
           var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen;//定义不同浏览器的全屏API
          //执行全屏
           if (typeof rfs != "undefined" && rfs) {
                 rfs.call(el);
           } else if(typeof window.ActiveXObject != "undefined"){
                 var wscript = new ActiveXObject("WScript.Shell");
                 if (wscript!=null) {
                     wscript.SendKeys("{F11}");
                 }
           }
          //监听不同浏览器的全屏事件,并件执行相应的代码
           document.addEventListener("webkitfullscreenchange", function() {//
               if (document.webkitIsFullScreen) {
                    //全屏后要执行的代码
               }else{
                    //退出全屏后执行的代码
             }
           }, false);
    
           document.addEventListener("fullscreenchange", function() {
               if (document.fullscreen) {
                    //全屏后执行的代码
               }else{
                    //退出全屏后要执行的代码
               }
           }, false);
    
           document.addEventListener("mozfullscreenchange", function() {
               if (document.mozFullScreen) {
                    //全屏后要执行的代码
               }else{
                    //退出全屏后要执行的代码
               }
           }, false);
    
           document.addEventListener("msfullscreenchange", function() {
               if (document.msFullscreenElement) {
                    //全屏后要执行的代码
               }else{
                    //退出全屏后要执行的代码
               }
           }, false)
        }
    }
    

      

  • 相关阅读:
    大话设计模式--中介者模式
    大话设计模式--职责链模式
    大话设计模式--命令模式
    大话设计模式--桥接模式
    迷宫求解
    stuct、class、typedef
    软件测试
    Scrapy初探
    python练习
    链表基础
  • 原文地址:https://www.cnblogs.com/yiyi17/p/9014672.html
Copyright © 2011-2022 走看看