Cara mengimplementasikan 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:

Coba 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 menyertakan prefiks 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>

Coba 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 penutup untuk keluar mode layar penuh:

Contoh

<script>
/* Dapatkan documentElement (<html>) untuk menampilkan halaman di mode layar penuh */
var elem = document.documentElement;
/* Lihat Penuh */
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}
/* Keluar dari mode layar penuh */
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 di mode layar penuh, Anda juga dapat menggunakan CSS untuk menyetel gaya halaman:

Contoh

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

Coba Sendiri

Laman yang Berhubungan

Panduan HTML DOM:Metode requestFullscreen()

Panduan HTML DOM:Metode exitFullscreen()

Panduan HTML DOM:Metode documentElement