Hur man uppnår fullscreen

Lär dig hur man använder JavaScript för att skapa fullscreen-fönster.

fullscreen fönster

Hur man använder JavaScript för att visa element i fullscreen-läge.

Klicka på knappen för att öppna video i fullscreen-läge:

Prova själv

fullscreen video

För att öppna ett element i fullscreen använder vi element.requestFullscreen() Metod:

Exempel

<script>
/* Hämta elementet som ska visas i fullscreen-läge (i detta exempel är det en video): */
var elem = document.getElementById("myvideo");
/* När openFullscreen()-funktionen körs, öppna video i fullscreen. */
Observera, vi måste inkludera prefix för olika webbläsare eftersom de inte stöder requestFullscreen-metoden */
function openFullscreen() {
  om (elem.requestFullscreen) {
    elem.requestFullscreen();
  } annars om (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } annars om (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}
</script>

Prova själv

fullscreen dokument

För att öppna hela sidan i fullscreen, använd document.documentElement ersätt document.getElementById("element")。

I detta exempel använder vi också en stängningsfunktion för att avsluta fullscreen:

Exempel

<script>
/* 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();
  }
}
/* Avsluta fullskärmsläge */
function closeFullscreen() {
  om (document.exitFullscreen) {
    document.exitFullscreen();
  } annars om (document.webkitExitFullscreen) { /* Safari */
    document.webkitExitFullscreen();
  } annars om (document.msExitFullscreen) { /* IE11 */
    document.msExitFullscreen();
  }
}
</script>

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

Exempel

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

Prova själv

Relaterade sidor

HTML DOM referenshandbok:requestFullscreen() metoden

HTML DOM referenshandbok:exitFullscreen() metoden

HTML DOM referenshandbok:documentElement-metoden