Einführung in JavaScript-Methoden, -Eigenschaften und -Ereignisse zur Steuerung des Vollbildmodus verschiedener Browser

Einführung in JavaScript-Methoden, -Eigenschaften und -Ereignisse zur Steuerung des Vollbildmodus verschiedener Browser_Javascript-Kenntnisse

WBOY

Freigeben： 2016-05-16 16:53:30

Original

1350 Leute haben es durchsucht

Code kopieren Der Code lautet wie folgt:

// Beurteilen Sie verschiedene Browser und find Die richtige Methode ist
function launchFullscreen(element) {
if(element.requestFullscreen) {
element.requestFullscreen();
} else if(element.mozRequestFullScreen) {
element. mozRequestFullScreen( );
} else if(element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if(element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}

//Vollbild starten!
launchFullScreen(document.documentElement); //Die gesamte Webseite
launchFullScreen(document.getElementById("videoElement")); >

Rufen Sie die Vollbildmethode für das Seitenelement auf, das Sie im Vollbildmodus anzeigen möchten, aber der Benutzer wird zunächst aufgefordert, den Vollbildmodus zuzulassen. Beachten Sie, dass Benutzer den Vollbildmodus höchstwahrscheinlich ablehnen werden. Wenn der Benutzer den Vollbildmodus ausführt, werden die Symbolleiste des Browsers und andere Schaltflächenmenüs ausgeblendet und Ihre Seite bedeckt den gesamten Bildschirm.

Vollbildmodus verlassen

Diese Methode „exitFullscreen“ (die auch das Browser-Präfix erfordert) führt dazu, dass der Browser den Vollbildmodus verlässt und in den normalen Modus wechselt.

Code kopieren Der Code lautet wie folgt:

// Browsertyp bestimmen

Funktion exitFullscreen( ) {
if(document.exitFullscreen) {
document.exitFullscreen();
} else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document .webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}

//Vollbildmodus verlassen!exitFullscreen();

Es ist zu beachten, dass „exitFullscreen“ nur vom Dokumentobjekt aufgerufen werden kann, nicht vom Objekt, das beim Starten des Vollbildmodus übergeben wurde.

Vollbildeigenschaften und Ereignisse

Leider erfordern die Vollbildeigenschaften und zugehörigen Methoden des Ereignisses auch das Hinzufügen des Browser-Präfixes, aber ich glaube, dass dies nicht bald notwendig sein wird.

1.document.fullScreenElement: Webseitenelement, das im Vollbildmodus angezeigt wird.

2.document.fullScreenEnabled: Bestimmen Sie, ob es sich derzeit im Vollbildmodus befindet.

Das Fullscreenchange-Ereignis wird ausgelöst, wenn der Vollbildmodus gestartet oder der Vollbildmodus beendet wird:

Code kopieren Der Code lautet wie folgt:

var fullscreenElement = document.fullscreenElement || .mozFullScreenElement |. document.webkitFullscreenElement;

var fullscreenEnabled ||. document.webkitFullscreenEnabled;

Sie können weiterhin die oben beschriebene Methode verwenden, um den Browsertyp zu bestimmen, der diesem Ereignis vorangestellt werden soll.

CSS im Vollbildstil

Verschiedene Browser bieten eine sehr nützliche CSS-Stilregel für den Vollbildmodus:

Code kopieren Der Code lautet wie folgt::-webkit-full-screen {

/ * Eigenschaften * /

}

:-moz-full-screen { /* Properties */

}

:-ms-fullscreen {

/* Properties */

}

:full-screen { /*pre-spec */

/* Properties */

}

:fullscreen { /* spec */

/* Properties */

}

/* tiefere Elemente */

:-webkit-full-screen video {

Breite: 100 %;
Höhe: 100 %;
}

/* Gestaltung des Hintergrunds*/

::backdrop {

/* Properties */
}
::-ms-backdrop {
/* Properties */
}

In manchen Fällen können WebKit-Stile Probleme verursachen, und Sie sollten diese Stile besser einfach halten.

Diese Vollbild-APIs sind super einfach und super nützlich. Ich habe diese API zum ersten Mal in der BananaBread-Demo gesehen. Es war ein Shooter-Spiel, das nur im Vollbildmodus ausgeführt werden musste. Es verwendete Event-Listening, um den Vollbildstatus zu erkennen. Denken Sie an diese nützlichen APIs und Sie können sie bei Bedarf verwenden.