如何使用 JavaScript 讓瀏覽器視窗全螢幕顯示？

如何用Javascript 讓視窗全螢幕（全螢幕拉伸）

簡介

實作全螢幕-網站存取者的螢幕體驗對於沉浸式內容至關重要。過去，由於瀏覽器相容性問題，這具有挑戰性。然而，隨著現代瀏覽器的出現和 JavaScript 的進步，讓視窗全螢幕顯示變得相對容易。

解決方案

製作訪客的瀏覽器使用 JavaScript全螢幕顯示，您可以利用以下功能方法：

function requestFullScreen(element) {
    // Supports most browsers and their versions.
    var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;

    if (requestMethod) { // Native full screen.
        requestMethod.call(element);
    } else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
        var wscript = new ActiveXObject("WScript.Shell");
        if (wscript !== null) {
            wscript.SendKeys("{F11}");
        }
    }
}

var elem = document.body; // Make the body go full screen.
requestFullScreen(elem);

說明

• requestFullScreen()函數檢查不同瀏覽器支援的原生全螢幕請求方法
• 如果本地方法可用，它會在指定元素（在本例中為body元素）上呼叫該方法，以使整個頁面充滿
• 對於舊版本的 Internet Explorer，它使用 ActiveXObject 發送 F11 擊鍵，從而觸發全螢幕模式。

附加說明

• 全螢幕模式需要使用者同意，因此使用者發起的操作非常重要（例如，點擊按鈕）來觸發請求。
• 某些較舊的瀏覽器可能不完全支援此功能，因此建議在實施此解決方案之前檢查瀏覽器相容性。

參考

• [使用全螢幕模式| MDN](https://developer.mozilla.org/en/DOM/Using_full-screen_mode-screen_mode )

以上是如何使用 JavaScript 讓瀏覽器視窗全螢幕顯示？的詳細內容。更多資訊請關注PHP中文網其他相關文章！