Sådan opnår man fuldskærm

Lær hvordan man bruger JavaScript til at oprette fuldskærm vindue.

fuldskærm vindue

Sådan bruger man JavaScript til at se elementer i fuldskærm-tilstand.

Klik på knappen for at åbne videoen i fuldskærm-tilstand:

prøv det selv

fuldskærm video

For at åbne elementet i fuldskærm bruger vi element.requestFullscreen() Metode:

eksempel

<script>
/* Få fat i elementet, der skal vises i fuldskærm-tilstand (i dette eksempel er det en video): */
var elem = document.getElementById("myvideo");
/* Når openFullscreen() funktionen udføres, åbn videoen i fuldskærm.
Bemærk, vi skal inkludere præfikser for forskellige browsere, fordi de endnu ikke understøtter requestFullscreen-metoden */
function openFullscreen() {
  hvis (elem.requestFullscreen) {
    elem.requestFullscreen();
  } ellers hvis (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } ellers hvis (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}
</script>

prøv det selv

fuldskærm dokument

For at åbne hele siden i fuldskærm, brug document.documentElement erstat document.getElementById("element").

I dette eksempel bruger vi også en lukkefunktion til at forlade fuldskærm:

eksempel

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

Når siden er i fuldskærmstilstand, kan du også bruge CSS til at indstille sideskemaet:

eksempel

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

prøv det selv

relaterede sider

HTML DOM referencehåndbog:requestFullscreen() metode

HTML DOM referencehåndbog:exitFullscreen() metode

HTML DOM referencehåndbog:documentElement metode