Cara mencapai mode layar penuh

Belajar cara membuat jendela layar penuh menggunakan JavaScript.

Jendela layar penuh

Cara melihat elemen dalam mode layar penuh menggunakan JavaScript.

Klik tombol untuk membuka video dalam mode layar penuh:

Cuba Sendiri

video layar penuh

Untuk membuka elemen dalam mode layar penuh, kami menggunakan element.requestFullscreen() Metode:

Contoh

<script>
/* Mendapatkan elemen yang akan ditampilkan dalam mode layar penuh (contoh: video): */
var elem = document.getElementById("myvideo");
/* Saat menjalankan fungsi openFullscreen() untuk membuka video dalam mode layar penuh.
Perhatian, kita harus memasukkan awalan untuk browser yang berbeda, karena mereka belum mendukung metode requestFullscreen */
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}
</script>

Cuba Sendiri

dokumen layar penuh

Untuk membuka halaman penuh dalam mode layar penuh, gunakan document.documentElement gantikan document.getElementById("element")

Dalam contoh ini, kami juga menggunakan fungsi tutup untuk keluar mode layar penuh:

Contoh

<script>
/* Dapatkan documentElement (<html>) untuk menampilkan halaman dalam mod penuh layar */
var elem = document.documentElement;
/* Lihat penuh layar */
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}
/* Keluar dari mod penuh layar */
function closeFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) { /* Safari */
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) { /* IE11 */
    document.msExitFullscreen();
  }
}
</script>

Ketika halaman berada dalam mod penuh layar, Anda juga dapat menggunakan CSS untuk menata gaya halaman:

Contoh

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

Cuba Sendiri

Laman Berkaitan

Rujukan Dom HTML:Metode requestFullscreen()

Rujukan Dom HTML:Metode exitFullscreen()

Rujukan Dom HTML:Metode documentElement