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

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

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

CodePen Demo

地址：演示、code

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

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

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

代碼在codepen的demo里。

何謂全屏？

MDN介紹：

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

chrome下的全屏表現：

全屏會隱藏標簽欄,書簽欄

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

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

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

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

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

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

全屏API：

總共用到6個API：

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

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

退出全屏：document.exitFullscreen()

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

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

無法進入全屏時觸發: 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并不能保證元素一定能夠進入全屏模式

MDN：例如