Fullscreen API requestFullscreen() metod

Definition och användning

requestFullscreen() Metoden öppnar element i fullskärm.

Tips:Använd exitFullscreen() metodAvsluta fullskärm

Exempel

Exempel 1

Visa <video>-element i fullskärm-läge:

/* Hämta elementet som ska visas i fullskärm-läge (i detta exempel är det en video):*/
var elem = document.getElementById("myvideo");
/* När openFullscreen()-funktionen körs, öppnas videon i fullskärm.
Observera att vi måste inkludera prefix från olika webbläsare eftersom de ännu inte stöder requestFullscreen-attribut */
function openFullscreen() {
  om (elem.requestFullscreen) {
    elem.requestFullscreen();
  } annars om (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } annars om (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}

Prova själv

Exempel 2

För att öppna HTML-sidan i fullskärm, använd document.documentElement istället för document.getElementById("element").I detta exempel använder vi också en stängningsfunktion för att stänga fullskärm:

/* Hämta documentElement (<html>) för att visa sidan i fullskärmsläge */
var elem = document.documentElement;
/* Visa i fullskärmsläge */
function openFullscreen() {
  om (elem.requestFullscreen) {
    elem.requestFullscreen();
  } annars om (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } annars om (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}
/* Stäng fullskärmsläge */
function closeFullscreen() {
  om (document.exitFullscreen) {
    document.exitFullscreen();
  } annars om (document.webkitExitFullscreen) { /* Safari */
    document.webkitExitFullscreen();
  } annars om (document.msExitFullscreen) { /* IE11 */
    document.msExitFullscreen();
  }
}

Prova själv

Exempel 3

När sidan är i fullskärmsläge kan du också använda CSS för att ställa in sidans stil:

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

Prova själv

Syntax

HTMLElementObject.requestFullscreen()

Parametrar

Ingen.

Tekniska detaljer

Returvärde: Ingen returvärde.

Webbläsarstöd

Tal i tabellen anger den första webbläsarversion som helt stöder denna metod.

Kommentarer:Vissa webbläsare kräver specifika prefix (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)