web 全屏模式輕鬆掌握[局部元素全屏展示]

我第一次對網頁全屏模式有概念，是那種網頁播放視頻的全屏播 放的那種。感覺很強，前幾個星期有個需求也是關於全屏模式的，接觸之後才知道全屏模式並不神祕，是個很容易掌握的技能…

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

CodePen Demo

地址：演示、code

進去看看，玩一下，本文將結合這個demo一起進行講解。

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

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

代碼在codepen的demo裏。

何謂全屏？

MDN介紹：

使用提供的API，讓一個元素與其子元素，可以佔據整個屏幕，並在此期間，從屏幕上隱藏所有的瀏覽器用戶界面以及其他應用。

chrome下的全屏表現：

1. 全屏會隱藏標籤欄,書籤欄

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

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

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

4. 進入全屏時，有一個默認的提示：‘按esc即可退出全屏模式’，如下圖顯示：

5. 當按Esc或調用退出全屏方法，退出全屏。標籤欄和書籤欄依然是隱藏的，網頁上的元素恢復成原本的尺寸。

   要顯示書籤欄和標籤欄，需要刷新一下頁面。

---

全屏API：

總共用到6個API：

1. 瀏覽器是否支持全屏模式：document.fullscreenEnabled
2. 使元素進入全屏模式：Element.requestFullscreen()
3. 退出全屏：document.exitFullscreen()
4. 檢查當前是否有節點處於全屏狀態：document.fullscreenElement
5. 進入全屏/離開全屏，觸發事件：document.fullscreenchange
6. 無法進入全屏時觸發: document.fullscreenerror

瀏覽器前綴：

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

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

/**
 * @description: 是否支持全屏+判斷瀏覽器前綴
 * @param {Function} fn 不支持全屏的回調函數 這裏設了一個默認值
 */
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(); // 執行不支持全屏的回調
    this.isFullscreenData = false;
  }
}

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

推薦這麼做，因爲如果每個API都要這樣重複的判斷瀏覽器前綴，那也太噁心了！

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

document.fullscreenEnabled屬性返回一個布爾值，表示當前文檔是否可以切換到全屏狀態。

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

如果沒有保存瀏覽器前綴的話，注意做一下不同瀏覽器前綴的兼容！下面不再強調。

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

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

這就是我們實現全屏的API，是不是超簡單？

值得注意的是：調用此API並不能保證元素一定能夠進入全屏模式

1. MDN：例如<iframe> 元素具有 allowfullscreen 屬性，可選擇是否將其內容以全屏模式顯示

   這種不被允許全屏的元素屬於極少數情況，我試過可以將button全屏。

2. 全屏請求必須在事件處理函數(點擊事件等)中調用，否則將會被拒絕。

   在demo中有演示,初始化直接全屏，會觸發進入全屏失敗回調。

3. 退出全屏：document.exitFullscreen()

介紹：

exitFullscreen() {
  const methodName =
    this.prefixName === ''
      ? 'exitFullscreen'
      : `${this.prefixName}ExitFullscreen`; // API 前綴
  document[methodName](); // 調用
}

調用這個方法會讓文檔回退到上一個調用Element.requestFullscreen()方法進入全屏模式之前的狀態。

多層全屏

像demo中，先進入左邊全屏，再進入紅色全屏，即爲：多層全屏的情況(雖然這種情況並不多)。

當出現多層全屏的情況，需要一層層的退出到頁面最初始的情況，並不是調用一次document.exitFullscreen()就恢復到頁面最初始的樣子。

4. 檢查當前是否有節點處於全屏狀態：document.fullscreenElement

fullscreenElement屬性返回正處於全屏狀態的Element節點，如果當前沒有節點處於全屏狀態，則返回null

/**
 * @description: 檢測有沒有元素處於全屏狀態
 * @return 布爾值
 */
isElementFullScreen() {
  const fullscreenElement =
    document.fullscreenElement ||
    document.msFullscreenElement ||
    document.mozFullScreenElement ||
    document.webkitFullscreenElement; // 有前綴的f是大寫，沒前綴是小寫
  if (fullscreenElement === null) {
    return false; // 當前沒有元素在全屏狀態
  } else {
    return true; // 有元素在全屏狀態
  }
}

事實上，還有一個屬性document.fullscreen，返回一個布爾值，表示文檔是否處於全屏模式。

兩個方法效果是一樣，但因爲IE不支持這個屬性，所以這裏用的是document.fullscreenElement

5. 進入全屏/離開全屏，觸發事件：document.fullscreenchange

當我們進入全屏和離開全屏的時候，都會觸發一個fullscreenchange事件。

MDN注意：此事件不會提供任何信息，表明是進入全屏或退出全屏。

看了好久事件返回的信息，確實找不到一個值，表明這是在進入全屏，或者離開全屏！

可以說相當不人性化了！但我們可以通過檢查當前是否有節點處於全屏狀態，判斷當前是否處於全屏模式。

/**
 * @description: 監聽進入/離開全屏
 * @param {Function} enter 進入全屏的回調
 *  @param {Function} quit 離開全屏的回調
 */
screenChange(enter,quit) {
  if (!this.isFullscreenData) return;
  const methodName = `on${this.prefixName}fullscreenchange`;
  document[methodName] = e => {
    if (this.isElementFullScreen()) {
      enter && enter(e); // 進入全屏回調
    } else {
      quit && quit(e); // 離開全屏的回調
    }
  };
}

注意：多層全屏的情況

1. 先進入左邊全屏(進入全屏回調)，再進入紅色全屏(進入全屏回調)
2. 退出全屏,此時退出紅色全屏，左邊仍是全屏(觸發進入全屏回調)
3. 出現這種情況，可以在點擊按鈕的時候，做一些狀態限制。或者根據全屏事件返回的dom信息來進行判斷。

6. 無法進入全屏時觸發: document.fullscreenerror

進入全屏並不總是成功的，可能是技術原因，也可能是用戶拒絕，我們在上文進入全文的APIElement.requestFullscreen()部分講過了。

比如全屏請求不是在事件處理函數中調用,會在這裏攔截到錯誤

/**
 * @description: 瀏覽器無法進入全屏時觸發
 * @param {Function} enterErrorFn 回調
 */
screenError(enterErrorFn) {
  const methodName = `on${this.prefixName}fullscreenerror`;
  document[methodName] = e => {
    enterErrorFn && enterErrorFn(e)
  };
}

Css： 全屏模式下的樣式

chorme 70 下的默認會爲正在全屏的dom添加兩個class：稍微看一下

1. 默認設置黑色背景

:not(:root):-webkit-full-screen::backdrop {
  position: fixed;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background: black; // 會將背景設爲黑色的 如果你沒爲你的dom設置背景的話，全屏下會爲黑色
}

2. 默認樣式：

:not(:root):-webkit-full-screen {
  object-fit: contain;
  position: fixed !important;
  top: 0px !important;
  right: 0px !important;
  bottom: 0px !important;
  left: 0px !important;
  box-sizing: border-box !important;
  min-width: 0px !important;
  max-width: none !important;
  min-height: 0px !important;
  max-height: none !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
  margin: 0px !important;
}

全屏狀態的CSS：

全屏狀態下，大多數瀏覽器的CSS支持:full-screen僞類，只有IE11支持:fullscreen僞類。使用這個僞類，可以對全屏狀態設置單獨的CSS屬性。

以下css摘自阮一峯老師的Fullscreen API：全屏操作

/* 針對dom的全屏設置 */
.div:-webkit-full-screen {
  background: #fff;
}
/* 全屏屬性 */
:-webkit-full-screen {}
:-moz-full-screen {}
:-ms-fullscreen {}
/* 全屏僞類 當前chrome:70 不支持 */
:full-screen {
}
:fullscreen {
  /* IE11支持 */
}

---

結語

我們可以把全屏技術應用在H5遊戲、信息流網站、視頻等地方，下次再有全屏需求時，記住不要慌，回頭看看過本文的栗子，把我封裝的類拿出來直接用就可以啦！

希望看完的朋友可以點個喜歡/關注，您的支持是對我最大的鼓勵。

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

以上2018.12.1

參考資料：

Fullscreen API：全屏操作

MDN