Metode requestFullscreen() API Penuh Layar

Definisi dan penggunaan

requestFullscreen() Metode membuka elemen dalam mode penuh layar.

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

Contoh

Contoh 1

Menampilkan elemen <video> dalam mode penuh layar:

/* Mendapatkan elemen yang akan ditampilkan dalam mode penuh layar (video dalam contoh ini): */
var elem = document.getElementById("myvideo");
/* Saat menjalankan fungsi openFullscreen() untuk membuka video secara penuh layar.
Perhatikan, kita harus menyertakan awalan untuk berbagai peramban, 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();
  }
}

亲自试一试

Contoh 2

Jika untuk membuka halaman HTML secara penuh layar, gunakan document.documentElement bukannya document.getElementById("element"). Dalam contoh ini, kami juga menggunakan fungsi tutup untuk menutup penuh layar:

/* 获取 documentElement (<html>) 以全屏显示页面 */
var elem = document.documentElement;
/* 全屏查看 */
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}
/* 关闭全屏 */
function closeFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) { /* Safari */
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) { /* IE11 */
    document.msExitFullscreen();
  }
}

亲自试一试

例子 3

当页面处于全屏模式时，您还可以使用 CSS 设置页面样式：

/* Safari */
:-webkit-full-screen {
  background-color: yellow;
}
/* IE11 语法 */
:-ms-fullscreen {
  background-color: yellow;
}
/* 标准语法 */
:fullscreen {
  background-color: yellow;
}

亲自试一试

语法

HTMLElementObject.requestFullscreen()

参数

无。

技术细节

返回值： 无返回值。

浏览器支持

表中的数字注明完全支持该方法的第一个浏览器版本。

注释：某些浏览器需要特定的前缀（见括号）：

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)