js實作各瀏覽器全螢幕程式碼-js教程-PHP中文網

js實作各瀏覽器全螢幕程式碼

不言

發布： 2018-07-03 17:54:51

原創

1735 人瀏覽過

本篇文章跟大家分享了js實作各瀏覽器全螢幕的詳細程式碼，有興趣的朋友可以參考學習下。

現代瀏覽器包含ie11，可以直接用h5的全螢幕api實作
低版本的IE需要透過ActiveX外掛程式實現；

//直接上程式碼

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
    <button onclick="fullScreen()">现代浏览器全屏</button>

    <button onclick="exitScreen()">现代浏览器退出</button>

    <button onclick="iefull()">低版本ie全屏</button>
  </body>
  <script src="js/jquery-2.1.1.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
    //全屏
    function fullScreen(){
      var el = document.documentElement;
      var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen;   
        if(typeof rfs != "undefined" && rfs) {
          rfs.call(el);
        };
       return;
    }
    //退出全屏
    function exitScreen(){
      if (document.exitFullscreen) { 
        document.exitFullscreen(); 
      } 
      else if (document.mozCancelFullScreen) { 
        document.mozCancelFullScreen(); 
      } 
      else if (document.webkitCancelFullScreen) { 
        document.webkitCancelFullScreen(); 
      } 
      else if (document.msExitFullscreen) { 
        document.msExitFullscreen(); 
      } 
      if(typeof cfs != "undefined" && cfs) {
        cfs.call(el);
      }
    }
    //ie低版本的全屏，退出全屏都这个方法
    function iefull(){
      var el = document.documentElement;
      var rfs = el.msRequestFullScreen;
      if(typeof window.ActiveXObject != "undefined") {
        //这的方法 模拟f11键，使浏览器全屏
        var wscript = new ActiveXObject("WScript.Shell");
        if(wscript != null) {
          wscript.SendKeys("{F11}");
        }
      }
    }
    //注：ie调用ActiveX控件，需要在ie浏览器安全设置里面把 ‘未标记为可安全执行脚本的ActiveX控件初始化并执行脚本&#39; 设置为启用
  </script>
</html>

登入後複製

註：實際應用中，可透過區分ie11 ie10，其它瀏覽器，控制按鈕的顯示、隱藏來實現適用各瀏覽器的全螢幕功能；

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！