JavaScript使瀏覽器全屏代碼及注意事項

更新時間：2025年05月19日 10:17:56 作者：庫庫的寫代碼

這篇文章主要給大家介紹了關于JavaScript使瀏覽器全屏代碼及注意事項的相關資料,文中通過示例代碼介紹了如何通過Element.requestFullscreen進入全屏、Document.exitFullscreen退出全屏、監(jiān)聽全屏變化事件,需要的朋友可以參考下

前言

在JavaScript中，你可以使用全屏API來讓瀏覽器窗口進入全屏模式。這個API在不同的瀏覽器中略有不同，但大多數現代瀏覽器都支持以下基本方法。

一、進入全屏模式

1.使用 Element.requestFullscreen() 方法

你可以調用任何元素的requestFullscreen()方法來讓瀏覽器進入全屏模式。通常，你會選擇整個文檔的根元素（如 document.documentElement），或者你想要全屏顯示的特定元素。

function enterFullscreen() {
    var elem = document.documentElement; // 獲取文檔的根元素
    if (elem.requestFullscreen) {
        elem.requestFullscreen(); // 標準方法
    } else if (elem.mozRequestFullScreen) { /* Firefox */
        elem.mozRequestFullScreen();
    } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
        elem.webkitRequestFullscreen();
    } else if (elem.msRequestFullscreen) { /* IE/Edge */
        elem.msRequestFullscreen();
    }
}

二、退出全屏模式

1.使用 Document.exitFullscreen() 方法

退出全屏模式可以通過調用 document 對象的 exitFullscreen() 方法實現。

function exitFullscreen() {
    if (document.exitFullscreen) {
        document.exitFullscreen(); // 標準方法
    } else if (document.mozCancelFullScreen) { /* Firefox */
        document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
        document.webkitExitFullscreen();
    } else if (document.msExitFullscreen) { /* IE/Edge */
        document.msExitFullscreen();
    }
}

三、監(jiān)聽全屏變化事件

你還可以監(jiān)聽全屏變化的事件，以便在全屏模式開啟或關閉時執(zhí)行某些操作。

1.監(jiān)聽全屏變化

function onFullScreenChange() {
    if (!document.fullscreenElement) {
        console.log('Exited full screen');
    } else {
        console.log('Entered full screen');
    }
}

2.添加事件監(jiān)聽器

document.addEventListener('fullscreenchange', onFullScreenChange); // 標準事件名，適用于所有主流瀏覽器，除了Safari。Safari使用'webkitfullscreenchange'。
document.addEventListener('webkitfullscreenchange', onFullScreenChange); // Safari專用