如何實現全屏

學習如何使用 JavaScript 創建全屏窗口。

全屏窗口

如何使用 JavaScript 以全屏模式查看元素。

單擊按鈕以全屏模式打開視頻：

親自試一試

全屏視頻

要全屏打開元素，我們使用 element.requestFullscreen() 方法：

實例

<script>
/* 獲取要以全屏模式顯示的元素（本例為視頻）： */
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();
  }
}
</script>

親自試一試

全屏文檔

要以全屏打開整個頁面，請使用 document.documentElement 代替 document.getElementById("element")。

在這個例子中，我們還使用一個關閉函數來退出全屏：

實例

<script>
/* 獲取 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();
  }
}
</script>

當頁面處于全屏模式時，您還可以使用 CSS 來設置頁面樣式：

實例

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

親自試一試

相關頁面

HTML DOM 參考手冊：requestFullscreen() 方法

HTML DOM 參考手冊：exitFullscreen() 方法

HTML DOM 參考手冊：documentElement 方法