Fullscreen API requestFullscreen()-metoden

Definisjon og bruk

requestFullscreen() Metoden åpner elementet i fullskjermmodus.

Tips:Bruk exitFullscreen()-metodenAvslutt fullskjermmodus.

Eksempel

Eksempel 1

Vis <video>-elementet i fullskjermmodus:

/* Få tak i elementet som skal vises i fullskjermmodus (videoen i dette eksempelet): */
var elem = document.getElementById("myvideo");
/* Når openFullscreen()-funksjonen utføres, åpnes videoen i fullskjermmodus. */
Vær oppmerksom på at vi må inkludere prefikser for forskjellige nettlesere, fordi de ikke støtter requestFullscreen-egenskapen */
function openFullscreen() {
  hvis (elem.requestFullscreen) {
    elem.requestFullscreen();
  } ellers hvis (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } ellers hvis (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}

Prøv det selv

Eksempel 2

For at å åpne HTML-siden i fullskjerm, bruk document.documentElement i stedet for document.getElementById("element").I dette eksempelet brukte vi også en lukkefunksjon for å lukke fullskjermmodusen:

/* Få documentElement (<html>) til at vise siden i fuldskærm */
var elem = document.documentElement;
/* Vis i fuldskærm */
function openFullscreen() {
  hvis (elem.requestFullscreen) {
    elem.requestFullscreen();
  } ellers hvis (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } ellers hvis (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}
/* Luk fuldskærm */
function closeFullscreen() {
  hvis (document.exitFullscreen) {
    document.exitFullscreen();
  } ellers hvis (document.webkitExitFullscreen) { /* Safari */
    document.webkitExitFullscreen();
  } ellers hvis (document.msExitFullscreen) { /* IE11 */
    document.msExitFullscreen();
  }
}

Prøv det selv

Eksempel 3

Når siden er i fuldskærmstilstand, kan du også bruge CSS til at sætte sidens stil:

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

Prøv det selv

Syntaks

HTMLElementObject.requestFullscreen()

Parametre

Ingen.

Tekniske detaljer

Returværdi: Ingen returværdi.

Browserunderstøttelse

Tallene i tabellen angiver den første browserversion, der fuldt ud understøtter denne metode.

Kommentarer:Nogle browsere kræver specifikke præfiks (se parenteser):

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)