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}");
}
}
}Nach dem Login kopieren
//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>Nach dem Login kopieren
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);
}Nach dem Login kopieren
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);
}Nach dem Login kopieren
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!
