如何用Javascript 讓視窗全螢幕(全螢幕拉伸)
簡介
實作全螢幕-網站存取者的螢幕體驗對於沉浸式內容至關重要。過去,由於瀏覽器相容性問題,這具有挑戰性。然而,隨著現代瀏覽器的出現和 JavaScript 的進步,讓視窗全螢幕顯示變得相對容易。
解決方案
製作訪客的瀏覽器使用 JavaScript全螢幕顯示,您可以利用以下功能方法:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | function requestFullScreen(element) {
var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;
if (requestMethod) {
requestMethod.call(element);
} else if (typeof window.ActiveXObject !== "undefined" ) {
var wscript = new ActiveXObject( "WScript.Shell" );
if (wscript !== null) {
wscript.SendKeys( "{F11}" );
}
}
}
var elem = document.body;
requestFullScreen(elem);
|
登入後複製
說明
- requestFullScreen()函數檢查不同瀏覽器支援的原生全螢幕請求方法
- 如果本地方法可用,它會在指定元素(在本例中為body元素)上呼叫該方法,以使整個頁面充滿
- 對於舊版本的 Internet Explorer,它使用 ActiveXObject 發送 F11 擊鍵,從而觸發全螢幕模式。
附加說明
- 全螢幕模式需要使用者同意,因此使用者發起的操作非常重要(例如,點擊按鈕)來觸發請求。
- 某些較舊的瀏覽器可能不完全支援此功能,因此建議在實施此解決方案之前檢查瀏覽器相容性。
參考
- [使用全螢幕模式| MDN](https://developer.mozilla.org/en/DOM/Using_full-screen_mode-screen_mode )
以上是如何使用 JavaScript 讓瀏覽器視窗全螢幕顯示?的詳細內容。更多資訊請關注PHP中文網其他相關文章!