Anleitung - Vollbild
Erfahren Sie, wie Sie mit JavaScript ein Vollbildfenster erstellen.
Vollbildfenster
So verwenden Sie JavaScript, um ein Element im Vollbildmodus anzuzeigen.
Klicken Sie auf die Schaltfläche, um das Video im Vollbildmodus zu öffnen:
Vollbildvideo
Um ein Element im Vollbildmodus zu öffnen, verwenden wir die element.requestFullscreen()
Methode:
Beispiel
<script>
/* Get the element you want displayed in fullscreen mode (a
video in this example): */
var elem = document.getElementById("myvideo");
/* When the openFullscreen() function is executed, open the video in
fullscreen.
Note that we must include prefixes for different browsers, as
they don't support the requestFullscreen method yet */
function openFullscreen() {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else
if (elem.webkitRequestFullscreen) { /* Safari */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen)
{ /* IE11 */
elem.msRequestFullscreen();
}
}
</script>
Vollbilddokument
Um die ganze Seite im Vollbildmodus zu öffnen, verwenden Sie document.documentElement
statt . In diesem Beispiel verwenden wir auch eine Schließfunktion, um den Vollbildmodus zu schließen:document.getElementById("element")
Beispiel
<script>
/* Get the documentElement (<html>) to display the page in fullscreen */
var elem = document.documentElement;
/* View in fullscreen */
function openFullscreen() {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.webkitRequestFullscreen)
{ /* Safari */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen)
{ /* IE11 */
elem.msRequestFullscreen();
}
}
/*
Close fullscreen */
function closeFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen)
{ /* Safari */
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { /* IE11 */
document.msExitFullscreen();
}
}
</script>
Sie können die Seite auch im Vollbildmodus mit CSS formatieren:
Beispiel
/* Safari */
:-webkit-full-screen {
background-color: yellow;
}
/* IE11 */
:-ms-fullscreen {
background-color: yellow;
}
/* Standard syntax */
:fullscreen {
background-color: yellow;
}
Verwandte Seiten
HTML-DOM-Referenz: Die Methode requestFullscreen() .
HTML-DOM-Referenz: Die Methode exitFullscreen() .
HTML-DOM-Referenz: Die documentElement-Eigenschaft .