Cara mencapai mode layar penuh
- Halaman Sebelumnya Bilah Pemberitahuan
- Halaman Berikutnya Garis Laju Gambar
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:
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>
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; }
Laman Berkaitan
Rujukan Dom HTML:Metode requestFullscreen()
Rujukan Dom HTML:Metode exitFullscreen()
Rujukan Dom HTML:Metode documentElement
- Halaman Sebelumnya Bilah Pemberitahuan
- Halaman Berikutnya Garis Laju Gambar