Miten saavuttaa täysinäinen näyttö

Opi, miten luoda täysinäinen ikkuna JavaScriptillä.

täysinäinen ikkuna

Miten tarkastella elementtiä täysinäisessä näytössä JavaScriptillä.

Napsauta painiketta avataksesi videon täysinäisessä näytössä:

Kokeile itse

täysinäinen video

Jotta voit avata elementin täysinäisessä näytössä, käytämme element.requestFullscreen() Menetelmä:

Esimerkki

<script>
/* Hae elementti, joka näytetään täysinäisessä näytössä (tässä esimerkissä video): */
var elem = document.getElementById("myvideo");
/* Kun suoritat openFullscreen() -funktiota, avaa video täysinäisessä näytössä. */
Huomaa, että meidän täytyy sisällyttää eri selaimille etuliitteet, koska ne eivät tue requestFullscreen-metodia */
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}
</script>

Kokeile itse

täysinäinen asiakirja

Jos haluat avata koko sivun täysinäisessä näytössä, käytä document.documentElement korvataan document.getElementById("element").

Tässä esimerkissä käytämme myös sulkeemista funktioita päättääksesi täysinäisestä näytöstä:

Esimerkki

<script>
/* Hae documentElement (<html>) täysiverkkonäkymää varten */
var elem = document.documentElement;
/* Näytä täysiverkkonäkymä */
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}
/* Poistu täysiverkkonäkymästä */
function closeFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) { /* Safari */
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) { /* IE11 */
    document.msExitFullscreen();
  }
}
</script>

Kun sivu on täysiverkkonäytössä, voit myös käyttää CSS:ää asettaaksesi sivun tyylit:

Esimerkki

/* Safari */
-webkit-full-screen {
  background-color: keltainen;
}
/* IE11 */
-ms-fullscreen {
  background-color: keltainen;
}
/* Standardinen syntaksi */
:fullscreen {
  background-color: keltainen;
}

Kokeile itse

Liittyvät sivut

HTML DOM -viittauskirja:requestFullscreen() -menetelmä

HTML DOM -viittauskirja:exitFullscreen() -menetelmä

HTML DOM -viittauskirja:documentElement -menetelmä