Die Codekopie lautet wie folgt:
// Verschiedene Browser beurteilen und die richtige Methode finden
Funktion lostfullscreen (Element) {
if (Element.RequestfulScreen) {
element.requestfulscreen ();
} else if (element.mozRequestfulScreen) {{
element.mozRequestfulScreen ();
} else if (element.webkitRequestfulScreen) {
element.webkitRequestfulScreen ();
} else if (element.msRequestfulScreen) {
element.sRequestfulScreen ();
}
}
// Ganze Bildschirm starten!
Launchfullscreen (Dokument.DocumentElement);
LERTFURLSCREEN (document.getElementById ("VideoElement"));
Rufen Sie die Vollbildmethode auf den Seitenelementen auf, die Sie im Vollbildmodus anzeigen möchten, und das Browserfenster wird zum Vollbild -Bildschirm. Der Benutzer fordert jedoch zunächst den Benutzer auf, den Vollbildmodus zuzulassen. Beachten Sie, dass Benutzer wahrscheinlich den Vollbildmodus ablehnen. Wenn der Benutzer den Vollbildmodus ausführt, werden die Symbolleiste des Browsers und andere Schaltflächenmenüs versteckt und Ihre Seite wird den gesamten Bildschirm abdecken.
Vollbildmodus beenden
Diese ExitFull -Screen -Methode (für die auch ein Browser -Präfix erforderlich ist) bewirkt, dass der Browser den Vollbildmodus beendet und zum normalen Modus wird.
Die Codekopie lautet wie folgt:
// Browsertyp bestimmen
Funktion exitsfullscreen () {
if (document.exitfulScreen) {
document.exitfulScreen ();
} else if (document.mozcancelfulscreen) {{
document.mozcancelfulscreen ();
} else if (document.webkitexitfulScreen) {{
document.webkitexitfulScreen ();
}
}
// Vollbildmodus beenden!
exitsfullscreen ();
Es ist zu beachten, dass ExitFull -Screen nur vom Dokumentobjekt aufgerufen werden kann, anstatt das Objekt, das beim Starten des Vollbildes übergeben wird.
Vollbildeigenschaften und Ereignisse
Leider erfordern die Eigenschaften und verwandten Methoden für Ereignisse auch das Browser -Präfix, aber ich glaube, dass dies nicht bald erforderlich sein wird.
1.Document.fullscreenElement: Vollbild -Webseitenelement.
2.Dokument.FullscreenEnabled: Bestimmt, ob es sich derzeit im Vollbildmodus befindet.
Das FullScreenchange -Ereignis wird ausgelöst, wenn das Vollbildmodus gestartet oder beendet wird:
Die Codekopie lautet wie folgt:
var fullscreenElement = document.fullscreenElement ||
var fullscreenEnabled = document.fullscreenEnabled || document.mozfullscreenabled ||.
Sie können dieses Ereignis immer noch mit der obigen Methode zum Beurteilung des Browsertyps vorfixieren.
Vollbildstil CSS
Verschiedene Browser bieten eine sehr nützliche CSS -Stilregel im Vollbildmodus:
Kopieren Sie den Code wie folgt ::-webkit-full-Screen {
/* Eigenschaften */
}
: -moz-full-Screen {
/* Eigenschaften */
}
: -ms-fullscreen {
/* Eigenschaften */
}
: Full-Screen { / *Pre-Spec * /
/* Eigenschaften */
}
: fullscreen { / * spec * /
/* Eigenschaften */
}
/ * tiefere Elemente *//
: -webkit-full-Screen-Video {
Breite: 100%;
Höhe: 100%;
}
/* Styling des Hintergrunds*/
:: Hintergrund {
/* Eigenschaften */
}
::-ms-backdrop {
/* Eigenschaften */
}
In einigen Fällen gibt es einige Probleme mit Webkit -Stilen, und Sie sollten diese Stile besser einfach halten.
Diese Vollbild-APIs sind super einfach und super nützlich. Als ich diese API zum ersten Mal in der Bananabread-Demo von MDN sah, war es ein Shooting-Spiel, das zufällig Vollbildmodus war, bei dem das Ereignis verwendet wurde und das Erkennung von Vollbildstaat anhörte. Denken Sie an diese nützlichen APIs, Sie können sie abholen, wenn Sie sie benötigen.