快捷導(dǎo)航

js實現(xiàn)各瀏覽器全屏代碼實例

更新時間：2018年07月03日 08:43:45 作者：前端小獅

本篇文章給大家分享了js實現(xiàn)各瀏覽器全屏的詳細代碼，有興趣的朋友可以參考學(xué)習(xí)下。

現(xiàn)代瀏覽器包括ie11，可以直接用h5的全屏api實現(xiàn)
低版本的IE需要通過ActiveX插件實現(xiàn)；

//直接上代碼

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
    <button onclick="fullScreen()">現(xiàn)代瀏覽器全屏</button>

    <button onclick="exitScreen()">現(xiàn)代瀏覽器退出</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調(diào)用ActiveX控件，需要在ie瀏覽器安全設(shè)置里面把 ‘未標(biāo)記為可安全執(zhí)行腳本的ActiveX控件初始化并執(zhí)行腳本' 設(shè)置為啟用
  </script>
</html>

注：實際應(yīng)用中，可通過區(qū)分ie11 ie10，其它瀏覽器，控制按鈕的顯示、隱藏來實現(xiàn) 適用各瀏覽器的全屏功能；

您可能感興趣的文章: