在 JavaScript 中獲取全屏視窗

Kushank Singh 2022年5月11日

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();