Metode requestFullscreen() API Fullscreen

Definisi dan penggunaan

requestFullscreen() Metode membuka elemen dalam mode layar penuh.

Petunjuk:Gunakan Metode exitFullscreen()Batal mode layar penuh.

Contoh

Contoh 1

Menampilkan elemen <video> dalam mode layar penuh:

/* Mendapatkan elemen yang akan ditampilkan dalam mode layar penuh (contoh video ini): */
var elem = document.getElementById("myvideo");
/* Menjalankan fungsi openFullscreen() untuk membuka video dalam mode layar penuh.
Perhatikan, kita harus termasuk prefiks berbeda browser karena mereka belum mendukung atribut requestFullscreen */
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}

Coba sendiri

Contoh 2

Untuk membuka halaman HTML dalam mode layar penuh, gunakan document.documentElement bukannya document.getElementById("element"). Dalam contoh ini, kami juga menggunakan fungsi penutup untuk menutup mode layar penuh:

/* Mendapatkan documentElement (<html>) untuk menampilkan halaman di mode layar penuh */
var elem = document.documentElement;
/* Lihat halaman di mode layar penuh */
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}
/* Tutup mode layar penuh */
function closeFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) { /* Safari */
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) { /* IE11 */
    document.msExitFullscreen();
  }
}

Coba sendiri

Contoh 3

Ketika halaman berada di mode layar penuh, Anda juga dapat menggunakan CSS untuk menata gaya halaman:

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

Coba sendiri

Syarat

HTMLElementObject.requestFullscreen()

Parameter

Tidak ada.

Detil teknis

Nilai kembalian: Tidak ada nilai kembalian.

Dukungan peramban

Angka di tabel menunjukkan versi peramban pertama yang mendukung metode ini penuh.

Keterangan:Beberapa peramban memerlukan prefiks khusus (lihat tanda kurung):

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)