讓用戶端JS觸發F11全屏


    讓用戶端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 }

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM