suchen

Heim  >  Artikel  >  Web-Frontend  >  Detaillierte Erläuterung des JS-Vollbildmodus und des Beendens des Vollbildmodus (einschließlich Code)

Detaillierte Erläuterung des JS-Vollbildmodus und des Beendens des Vollbildmodus (einschließlich Code)

亚连
亚连Original
2018-05-19 14:20:229260Durchsuche

Beim Ansehen von Video-Websites können wir viele Exit-Vollbildeffekte und Vollbildeffekte sehen. Hier stellen wir Ihnen die Codebeispiele für die Verwendung von js Vollbild und Exit-Vollbild vor

JS Vollbild und Vollbild beenden

js realisiert die Vollbild- und Vollbild-Beendigungsfunktionen des Browserfensters Mainstream-Browser wie: Google, Firefox, 360 usw. sind alle kompatibel, aber die niedrigere Version von IE weist einige Mängel auf (im Vollbildmodus befindet sich unten immer noch eine Statusleiste).

Diese Demo reicht im Grunde aus. Kopieren Sie einfach den Quellcode unten und speichern Sie ihn als HTML-Datei, um den Effekt zu sehen. 

<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js全屏和退出全屏代码</title>
<body>
<!-- requestFullScreen(document.documentElement): 整个网页进入全屏
  requestFullScreen(document.getElementById("video-box")): 指定某块区域全屏
 -->
<button onclick="requestFullScreen(document.documentElement)">全屏显示</button>
<button onclick="exitFull()">退出全屏</button>
</body>
<script type="text/javascript">
function requestFullScreen(element) {
 // 判断各种浏览器，找到正确的方法
 var requestMethod = element.requestFullScreen || //W3C
 element.webkitRequestFullScreen || //Chrome等
 element.mozRequestFullScreen || //FireFox
 element.msRequestFullScreen; //IE11
 if (requestMethod) {
  requestMethod.call(element);
 }
 else if (typeof window.ActiveXObject !== "undefined") {//for Internet Explorer
  var wscript = new ActiveXObject("WScript.Shell");
  if (wscript !== null) {
   wscript.SendKeys("{F11}");
  }
 }
}

//Vollbildmodus verlassen, um den Browsertyp zu bestimmen

function exitFull() {
 // 判断各种浏览器，找到正确的方法
 var exitMethod = document.exitFullscreen || //W3C
 document.mozCancelFullScreen || //Chrome等
 document.webkitExitFullscreen || //FireFox
 document.webkitExitFullscreen; //IE11
 if (exitMethod) {
  exitMethod.call(document);
 }
 else if (typeof window.ActiveXObject !== "undefined") {//for Internet Explorer
  var wscript = new ActiveXObject("WScript.Shell");
  if (wscript !== null) {
   wscript.SendKeys("{F11}");
  }
 }
}
</script>
</html>

Wir wissen, Durchsuchen Um in den Vollbildmodus zu wechseln, drücken Sie normalerweise die Tastenkombination F11. Es ist nicht ungewöhnlich, dass JS den Vollbildmodus des Browsers steuert. Dadurch sehen Webanwendungen eher wie native Softwareanwendungen aus. Zum Beispiel Bestellsystem, Aufrufsystem usw.

Es gibt viele Möglichkeiten, den Browser über JS in den Vollbildmodus zu versetzen und ihn im Vollbildmodus zu beenden. Der wichtige Punkt ist zu beachten: Der Browser-Vollbildmodus kann nur durch Mausgesten-Klickereignisse ausgelöst werden.

JS-Vollbildmethode

var $fullScreen = document.getElementById("js-fullScreen");//按钮 
if ($fullScreen) { 
  $fullScreen.addEventListener("click", function () { 
    var docElm = document.documentElement; 
    if (docElm.requestFullscreen) { 
      docElm.requestFullscreen(); 
    } 
    else if (docElm.msRequestFullscreen) { 
      docElm.msRequestFullscreen(); 
    } 
    else if (docElm.mozRequestFullScreen) { 
      docElm.mozRequestFullScreen(); 
    } 
    else if (docElm.webkitRequestFullScreen) { 
      docElm.webkitRequestFullScreen(); 
    } 
  }, false); 
}

JS-Vollbildmethode beenden

var $cancelFullScreen = document.getElementById("js-cancelFullScreen"); 
if ($cancelFullScreen) { 
  $cancelFullScreen.addEventListener("click", function () { 
    if (document.exitFullscreen) { 
      document.exitFullscreen(); 
    } 
    else if (document.msExitFullscreen) { 
      document.msExitFullscreen(); 
    } 
    else if (document.mozCancelFullScreen) { 
      document.mozCancelFullScreen(); 
    } 
    else if (document.webkitCancelFullScreen) { 
      document.webkitCancelFullScreen(); 
    } 
  }, false); 
}

Konsolenwarnung

Fehler beim Ausführen von „requestFullscreen“ auf „Element“: API kann nur durch eine Benutzergeste initiiert werden.

Interpretation: auf „Element“ Die Ausführung der Methode „requestFullscreen“ ist fehlgeschlagen, die Javascript-API erlaubt nur die Erstellung durch Gesten! (d. h. keine Berechtigungen)

Wird normalerweise dadurch verursacht, dass Programmierer den Browser dazu veranlassen möchten, automatisch den Vollbildmodus anzuzeigen. Aber es tut mir leid, diese Methode funktioniert nicht. Sie muss durch Gesten erstellt werden. Selbst Onload, Trigger() und Mouseover können nicht ausgelöst werden.

Offizielle Erklärung

Die Methode Element.requestFullscreen() gibt eine asynchrone Anfrage aus, damit das Element im Vollbildmodus angezeigt wird. Es gibt jedoch keine Garantie dafür, dass das Element in den Vollbildmodus versetzt wird.

Wenn der Vollbildmodus zulässig ist, erhält das Dokument ein Fullscreenchange-Ereignis, das ihm mitteilt, dass es sich jetzt im Vollbildmodus befindet. Wenn die Berechtigung verweigert wird, erhält das Dokument ein FullScreenError-Ereignis.

Fazit

Vielleicht aus Gründen der Benutzererfahrung ermöglicht clientseitiges Javascript, dass der Browser nur durch Klickereignisse mit Mausgesten, also durch Klicken, im Vollbildmodus angezeigt wird () .

Das Obige habe ich für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Nodejs+Electron Ubuntu-Installationsschritte, detaillierte Erklärung

Native JS+ AJAX erzeugt einen dreistufigen Verknüpfungseffekt (mit Code)

Vue.jsZwei-Wege-Bindungs-Implementierungsschrittanweisungen

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des JS-Vollbildmodus und des Beendens des Vollbildmodus (einschließlich Code). 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：Javascript-Array-Schleifendurchlauf (forEach ausführliche Erklärung)Nächster Artikel：Javascript-Array-Schleifendurchlauf (forEach ausführliche Erklärung)

In Verbindung stehende Artikel

Mehr sehen