在 JavaScript 中獲取全屏視窗

Kushank Singh 2023年10月12日

JavaScript

在本教程中，我們將學習如何使用 JavaScript 獲取全屏視窗。

全屏 API 幫助我們使用 JavaScript 程式碼將網頁轉換為全屏模式。我們可以將它應用於整個文件或單個元素。

檢查下面的示例。

function getFullscreenElement() {
  return document.fullscreenElement        // standard property
      || document.webkitFullscreenElement  // safari/opera support
      || document.mozFullscreenElement     // firefox support
      || document.msFullscreenElement;     // ie/edge support
}
function toggleFullscreen() {
  if (getFullscreenElement()) {
    document.exitFullscreen();
  } else {
    document.getElementById('container')
        .getFullscreenElement()
        .catch(console.log);
  }
}

在上面的程式碼中，getFullscreenElement() 函式中有四個不同的選項，例如 document.fullscreenElement、document.webkitFullscreenElement、document.mozFullscreenElement 和 document.msFullscreenElement，它們使全屏命令與幾乎所有瀏覽器相容。

toggleFullscreen() 使視窗進入非全屏模式的全屏模式，反之亦然，通過單擊 Enter Full-Screen 按鈕。我們可以通過以下方式在給定元素上呼叫此函式。

document.getElementById('button').addEventListener('click', () => {
  toggleFullscreen();