摘要：推薦這么做，因為如果每個都要這樣重復(fù)的判斷瀏覽器前綴，那也太惡心了瀏覽器是否支持全屏模式屬性返回一個布爾值，表示當(dāng)前文檔是否可以切換到全屏狀態(tài)。

我第一次對網(wǎng)頁全屏模式有概念，是那種網(wǎng)頁播放視頻的全屏播 放的那種。感覺很強(qiáng)，前幾個星期有個需求也是關(guān)于全屏模式的，接觸之后才知道全屏模式并不神秘，是個很容易掌握的技能...

博客、前端積累文檔、公眾號、GitHub

CodePen Demo

地址：演示、code

進(jìn)去看看，玩一下，本文將結(jié)合這個demo一起進(jìn)行講解。

全屏功能封裝在一個類里面：

我把全屏模式封裝在一個類里面，在代碼中有詳細(xì)的注釋，如果有需要的話，直接把類拿出來，根據(jù)栗子和注釋使用即可。

代碼在codepen的demo里。

何謂全屏？

MDN介紹：

使用提供的API，讓一個元素與其子元素，可以占據(jù)整個屏幕，并在此期間，從屏幕上隱藏所有的瀏覽器用戶界面以及其他應(yīng)用。

chrome下的全屏表現(xiàn)：

全屏?xí)[藏標(biāo)簽欄,書簽欄

如果網(wǎng)頁一開始不是全部撐開的形式，全屏下，也會將要全屏的元素充滿整個屏幕

可以多層全屏，如栗子中一樣，可以先左邊全屏，然后紅色全屏。

在這種情況下退出全屏，只會退出紅色全屏，退回到左邊全屏的形式，所以頁面依然是全屏模式。

進(jìn)入全屏?xí)r，有一個默認(rèn)的提示："按esc即可退出全屏模式"，如下圖顯示：

當(dāng)按Esc或調(diào)用退出全屏方法，退出全屏。標(biāo)簽欄和書簽欄依然是隱藏的，網(wǎng)頁上的元素恢復(fù)成原本的尺寸。

要顯示書簽欄和標(biāo)簽欄，需要刷新一下頁面。

全屏API：

總共用到6個API：

瀏覽器是否支持全屏模式：document.fullscreenEnabled

使元素進(jìn)入全屏模式：Element.requestFullscreen()

退出全屏：document.exitFullscreen()

檢查當(dāng)前是否有節(jié)點處于全屏狀態(tài)：document.fullscreenElement

進(jìn)入全屏/離開全屏，觸發(fā)事件：document.fullscreenchange

無法進(jìn)入全屏?xí)r觸發(fā): document.fullscreenerror

瀏覽器前綴：

目前并不是所有的瀏覽器都實現(xiàn)了API的無前綴版本，所以我們需要針對不同瀏覽器，做一下API的兼容:

這是我在demo中做的瀏覽器兼容：

/**
 * @description: 是否支持全屏+判斷瀏覽器前綴
 * @param {Function} fn 不支持全屏的回調(diào)函數(shù) 這里設(shè)了一個默認(rèn)值
 */
isFullscreen(fn) {
  let fullscreenEnabled;
  // 判斷瀏覽器前綴
  if (document.fullscreenEnabled) {
    fullscreenEnabled = document.fullscreenEnabled;
  } else if (document.webkitFullscreenEnabled) {
    fullscreenEnabled = document.webkitFullscreenEnabled;
    this.prefixName = "webkit";
  } else if (document.mozFullScreenEnabled) {
    fullscreenEnabled = document.mozFullScreenEnabled;
    this.prefixName = "moz";
  } else if (document.msFullscreenEnabled) {
    fullscreenEnabled = document.msFullscreenEnabled;
    this.prefixName = "ms";
  }
  if (!fullscreenEnabled) {
    if (fn !== undefined) fn(); // 執(zhí)行不支持全屏的回調(diào)
    this.isFullscreenData = false;
  }
}

我在實例化的時候進(jìn)行一次判斷瀏覽器是否支持全屏，然后保存瀏覽器前綴。

推薦這么做，因為如果每個API都要這樣重復(fù)的判斷瀏覽器前綴，那也太惡心了！

1. 瀏覽器是否支持全屏模式：document.fullscreenEnabled

document.fullscreenEnabled屬性返回一個布爾值，表示當(dāng)前文檔是否可以切換到全屏狀態(tài)。

代碼在上方瀏覽器前綴代碼中給出了。

如果沒有保存瀏覽器前綴的話，注意做一下不同瀏覽器前綴的兼容！下面不再強(qiáng)調(diào)。

2. 使元素進(jìn)入全屏模式：Element.requestFullscreen()

/**
 * @description: 將傳進(jìn)來的元素全屏
 * @param {String} domName 要全屏的dom名稱
 */
Fullscreen(domName) {
  const element = document.querySelector(domName); // 獲取dom
  const methodName =
    this.prefixName === ""
      ? "requestFullscreen"
      : `${this.prefixName}RequestFullScreen`; // API前綴
  element[methodName](); // 調(diào)用全屏
}

這就是我們實現(xiàn)全屏的API，是不是超簡單？

值得注意的是：調(diào)用此API并不能保證元素一定能夠進(jìn)入全屏模式

MDN：例如