Hoe - Volledig scherm
Leer hoe u een venster op volledig scherm maakt met JavaScript.
Venster op volledig scherm
JavaScript gebruiken om een element op volledig scherm te bekijken.
Klik op de knop om de video op volledig scherm te openen:
Video op volledig scherm
Om een element in volledig scherm te openen, gebruiken we de element.requestFullscreen()
methode:
Voorbeeld
<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>
Document op volledig scherm
Om de hele pagina op volledig scherm te openen, gebruikt u de document.documentElement
in plaats van . In dit voorbeeld gebruiken we ook een sluitfunctie om het volledige scherm te sluiten:document.getElementById("element")
Voorbeeld
<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>
U kunt ook CSS gebruiken om de pagina op te maken wanneer deze zich in de modus Volledig scherm bevindt:
Voorbeeld
/* Safari */
:-webkit-full-screen {
background-color: yellow;
}
/* IE11 */
:-ms-fullscreen {
background-color: yellow;
}
/* Standard syntax */
:fullscreen {
background-color: yellow;
}
Gerelateerde pagina's
HTML DOM-referentie: de methode requestFullscreen() .
HTML DOM-referentie: de methode exitFullscreen() .
HTML DOM-referentie: de eigenschap documentElement .