Fullscreen API requestFullscreen() -menetelmä

Määritelmä ja käyttö

requestFullscreen() Avaa elementti kokoruudussa.

Vinkki:Käytä exitFullscreen() -menetelmäPoista kokoruudun tila.

Esimerkki

Esimerkki 1

Näytä <video>-elementti kokoruudussa:

/* Hae elementti, joka näytetään kokoruudussa (tässä esimerkissä video):*/
var elem = document.getElementById("myvideo");
/* Suorita openFullscreen() -funktio kokoruudun avaukseksi.
Huomaa, että meidän täytyy sisällyttää eri selaimien etuliitteet, koska ne eivät tue requestFullscreen-ominaisuutta */
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}

Kokeile itse!

Esimerkki 2

Jos haluat avata HTML-sivun kokoruudulla, käytä document.documentElement eikä document.getElementById("element"). Tässä esimerkissä käytimme myös sulkeemismetodia kokoruudun sulkemiseksi:

/* Hae documentElement (<html>) kokoruutu näyttämiseksi */
var elem = document.documentElement;
/* Näytä kokoruutu */
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}
/* Sulje kokoruutu */
function closeFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) { /* Safari */
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) { /* IE11 */
    document.msExitFullscreen();
  }
}

Kokeile itse!

Esimerkki 3

Kun sivu on kokoruututilassa, voit myös käyttää CSS:ää asettaaksesi sivun tyylit:

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

Kokeile itse!

Syntaksi

HTMLElementObject.requestFullscreen()

Parametrit

Ei mitään.

Tekninen yksityiskohta

Paluuarvo: Ei paluuarvoa.

Selaimen tuki

Taulukossa olevat numerot viittaavat ensimmäiseen selaimen versioon, joka täysin tukee tätä menetelmää.

Huomautus:Jotkut selaimet vaativat erityisen etuliitteen (katso sulkeet):

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)