使用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)
    }
}

  

猜你喜欢

转载自www.cnblogs.com/yiyi17/p/9014672.html