Bagaimana caranya - Layar penuh
Pelajari cara membuat jendela layar penuh dengan JavaScript.
Jendela Layar Penuh
Cara menggunakan JavaScript untuk melihat elemen dalam mode layar penuh.
Klik tombol untuk membuka video dalam mode layar penuh:
Video Layar Penuh
Untuk membuka elemen dalam layar penuh, kami menggunakan element.requestFullscreen()
metode:
Contoh
<script>
/* Get the element you want displayed in fullscreen mode (a
video in this example): */
var elem = document.getElementById("myvideo");
/* When the openFullscreen() function is executed, open the video in
fullscreen.
Note that we must include prefixes for different browsers, as
they don't support the requestFullscreen method yet */
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 seluruh halaman dalam layar penuh, gunakan document.documentElement
alih-alih . Dalam contoh ini, kami juga menggunakan fungsi close untuk menutup layar penuh:document.getElementById("element")
Contoh
<script>
/* Get the documentElement (<html>) to display the page in fullscreen */
var elem = document.documentElement;
/* View in fullscreen */
function openFullscreen() {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.webkitRequestFullscreen)
{ /* Safari */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen)
{ /* IE11 */
elem.msRequestFullscreen();
}
}
/*
Close fullscreen */
function closeFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen)
{ /* Safari */
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { /* IE11 */
document.msExitFullscreen();
}
}
</script>
Anda juga dapat menggunakan CSS untuk menata halaman saat dalam mode layar penuh:
Contoh
/* Safari */
:-webkit-full-screen {
background-color: yellow;
}
/* IE11 */
:-ms-fullscreen {
background-color: yellow;
}
/* Standard syntax */
:fullscreen {
background-color: yellow;
}
Halaman Terkait
Referensi DOM HTML: Metode requestFullscreen() .
Referensi DOM HTML: Metode exitFullscreen() .
Referensi DOM HTML: Properti documentElement .