JavaScript實(shí)現(xiàn)頁(yè)面全屏展示功能

更新時(shí)間：2026年02月04日 09:14:20 作者：小明記賬簿

這篇文章主要為大家詳細(xì)介紹了如何使用JavaScript實(shí)現(xiàn)頁(yè)面全屏展示功能,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,感興趣的小伙伴可以了解下

最近做一個(gè)網(wǎng)頁(yè)項(xiàng)目，用戶(hù)要求可以全屏展示，進(jìn)入系統(tǒng)后隱藏地址欄，于是乎，經(jīng)過(guò)調(diào)研就選擇了全屏API，即便如此還是遇到了一些問(wèn)題，總結(jié)一下，寫(xiě)下此篇文章，以免以后再遇到相同的問(wèn)題。

在JavaScript中，實(shí)現(xiàn)頁(yè)面全屏展示主要依賴(lài)于HTML5的Fullscreen API，這是一個(gè)相對(duì)較新的技術(shù)，因此在舊版本的瀏覽器上可能不受支持，現(xiàn)代瀏覽器支出如下。

檢查瀏覽器是否支持Fullscreen API

在嘗試使用Fullscreen API之前，最好先檢查瀏覽器是否支持它。雖然現(xiàn)代瀏覽器普遍支持，但檢查總是好的做法。

if (document.fullscreenEnabled ||
    document.mozFullScreenEnabled ||
    document.webkitFullscreenEnabled ||
    document.msFullscreenEnabled) {
    // 支持全屏
} else {
    // 不支持全屏
}

全屏模式

獲取Element節(jié)點(diǎn)，然后使用requestFullscreen方法，可以使得這個(gè)節(jié)點(diǎn)全屏，全屏模式的具體實(shí)現(xiàn)可能因?yàn)g覽器而異，所以要做不同瀏覽器處理。

const openFullScreen = () => {
  const full = document.getElementById('fullscreen')
  if (full.RequestFullScreen) {
    full.RequestFullScreen()
  } else if (full.mozRequestFullScreen) {
    full.mozRequestFullScreen()
  } else if (full.webkitRequestFullScreen) {
    full.webkitRequestFullScreen()
  } else if (full.msRequestFullscreen) {
    full.msRequestFullscreen()
  }
}

退出全屏模式

退出全屏模式可以通過(guò)調(diào)用document.exitFullscreen()方法實(shí)現(xiàn)。這個(gè)方法會(huì)嘗試讓當(dāng)前處于全屏模式的元素退出全屏。用戶(hù)手動(dòng)按下ESC鍵，也可以退出全屏鍵。

const exitFullScreen = () => {
  if (document.exitFullScreen) {
    document.exitFullScreen();
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) {
    document.msExitFullscreen();
  }
}

獲取全屏元素

document.fullscreenElement屬性返回正處于全屏狀態(tài)的Element節(jié)點(diǎn)，如果當(dāng)前沒(méi)有節(jié)點(diǎn)處于全屏狀態(tài)，則返回null。可以通過(guò)此方法判斷是否在全屏狀態(tài)。

const fullscreenElement =
  document.fullscreenElement ||
  document.mozFullScreenElement ||
  document.webkitFullscreenElement;

注意事項(xiàng)

想要全屏的元素都應(yīng)該在這個(gè)Element節(jié)點(diǎn)下面，否則的話全屏?xí)r不會(huì)展示。如下圖的html結(jié)構(gòu)，點(diǎn)擊單開(kāi)彈框依然無(wú)法在全屏模式下看到彈窗，推出全屏?xí)r會(huì)看到彈窗已經(jīng)出現(xiàn)。如果想避免這種莫名的問(wèn)題，可以把document.getElementById('fullscreen') 改成document.documentElement，讓整個(gè)HTML全屏。