Fullscreen API requestFullscreen() methode

Definitie en gebruik

requestFullscreen() Methode om elementen in volledig scherm te openen.

Tip:Gebruik exitFullscreen() methodeVerwijder volledig schermmodus.

Voorbeeld

Voorbeeld 1

Toon het <video>-element in volledig schermmodus:

/* Haal het element op dat in volledig schermweergave moet worden weergegeven (het video in dit voorbeeld):*/
var elem = document.getElementById("myvideo");
/* Bij het uitvoeren van de openFullscreen() functie, wordt het video geopend in volledig scherm.
Let op, we moeten de prefixes van verschillende browsers opnemen, omdat ze de requestFullscreen-eigenschap nog niet ondersteunen */
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}

Probeer het zelf

Voorbeeld 2

Om een HTML-pagina in volledig scherm te openen, gebruik dan document.documentElement in plaats van document.getElementById("element").In dit voorbeeld gebruiken we ook een sluitfunctie om volledig scherm te sluiten:

/* Haal documentElement (<html>) op om de pagina in volledig scherm te tonen */
var elem = document.documentElement;
/* Bekijk volledig scherm */
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}
/* Sluit volledig scherm */
function closeFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) { /* Safari */
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) { /* IE11 */
    document.msExitFullscreen();
  }
}

Probeer het zelf

Voorbeeld 3

Wanneer de pagina in volledig schermmodus is, kunt u ook de CSS-stijl van de pagina instellen:

/* Safari */
:-webkit-full-screen {
  background-color: yellow;
}
/* IE11 syntaxis */
:-ms-fullscreen {
  background-color: yellow;
}
/* Standaard syntaxis */
:fullscreen {
  background-color: yellow;
}

Probeer het zelf

Syntaxis

HTMLElementObject.requestFullscreen()

Parameters

Geen.

Technische details

Retourwaarde: Geen retourwaarde.

Browserondersteuning

De cijfers in de tabel vermelden de eerste browserversie die deze methode volledig ondersteunt.

Opmerking:Sommige browsers vereisen specifieke voorvoegsels (zie haakjes):

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
71.0
15.0 (webkit)		 79.0
11.0 (ms)		 64.0
9.0 (moz)		 6.0 (webkit) 58.0
15.0 (webkit)