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

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

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

檢查瀏覽器是否支持Fullscreen API

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

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

全屏模式

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

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()
  }
}

退出全屏模式

退出全屏模式可以通過調(diào)用document.exitFullscreen()方法實現(xiàn)。這個方法會嘗試讓當前處于全屏模式的元素退出全屏。用戶手動按下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é)點，如果當前沒有節(jié)點處于全屏狀態(tài)，則返回null?？梢酝ㄟ^此方法判斷是否在全屏狀態(tài)。

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

注意事項

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