快捷導(dǎo)航

JavaScript使瀏覽器全屏代碼及注意事項(xiàng)

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

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

前言

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

一、進(jìn)入全屏模式

1.使用 Element.requestFullscreen() 方法

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

function enterFullscreen() {
    var elem = document.documentElement; // 獲取文檔的根元素
    if (elem.requestFullscreen) {
        elem.requestFullscreen(); // 標(biāo)準(zhǔn)方法
    } 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() 方法

退出全屏模式可以通過調(diào)用 document 對(duì)象的 exitFullscreen() 方法實(shí)現(xiàn)。

function exitFullscreen() {
    if (document.exitFullscreen) {
        document.exitFullscreen(); // 標(biāo)準(zhǔn)方法
    } 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)聽全屏變化的事件，以便在全屏模式開啟或關(guān)閉時(shí)執(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); // 標(biāo)準(zhǔn)事件名，適用于所有主流瀏覽器，除了Safari。Safari使用'webkitfullscreenchange'。
document.addEventListener('webkitfullscreenchange', onFullScreenChange); // Safari專用