suchen

Heim >Web-Frontend >js-Tutorial >js implementiert Vollbildcode für jeden Browser

js implementiert Vollbildcode für jeden Browser

不言
不言Original
2018-07-03 17:54:511767Durchsuche

In diesem Artikel erfahren Sie, wie Sie den Vollbildmodus mithilfe von js in verschiedenen Browsern implementieren. Interessierte Freunde können sich darauf beziehen.

Moderne Browser enthalten ie11, das direkt über die Vollbild-API von h5 implementiert werden kann.
Niedrigere Versionen von IE müssen über ActiveX-Plug-Ins implementiert werden.

//Direkt hochladen der Code 

<!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>

Hinweis: In der tatsächlichen Anwendung kann die für jeden Browser anwendbare Vollbildfunktion realisiert werden, indem zwischen ie11 ie10 und anderen Browsern unterschieden und gesteuert wird Anzeigen und Ausblenden von Schaltflächen;

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Lernen aller hilfreich ist Webseite!

Verwandte Empfehlungen:

JS-Implementierungsmethode zur Anzeige des aktuellen Datums

VUE 3D-Karusselldiagramm-Kapselungsimplementierungsmethode

Das obige ist der detaillierte Inhalt vonjs implementiert Vollbildcode für jeden Browser. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：JS implementiert eine Methode zur Anzeige des aktuellen DatumsNächster Artikel：JS implementiert eine Methode zur Anzeige des aktuellen Datums

In Verbindung stehende Artikel

Mehr sehen