Fullscreen API requestFullscreen() 方法

定義和用法

requestFullscreen() 方法以全屏模式打開元素。

提示：請使用 exitFullscreen() 方法取消全屏模式。

實例

例子 1

在全屏模式下顯示 <video> 元素：

/* 獲取要以全屏模式顯示的元素（本例中的視頻）：*/
var elem = document.getElementById("myvideo");
/* 執行 openFullscreen() 函數時，全屏打開視頻。
請注意，我們必須包含不同瀏覽器的前綴，因為它們還不支持 requestFullscreen 屬性 */
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}

親自試一試

例子 2

如需全屏打開 HTML 頁面，請使用 document.documentElement 而不是 document.getElementById("element")。在這個例子中，我們還使用了一個關閉函數來關閉全屏：

/* 獲取 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)