全屏實現(xiàn)

最近需求中遇到關于全屏展示的需求，于是深入了解了一下demo如下所示凿渊？

demo

MDN介紹：

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

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

全屏會隱藏標簽欄,書簽欄
如果網(wǎng)頁一開始不是全部撐開的形式谐檀，全屏下，也會將要全屏的元素充滿整個屏幕

1. 全屏API：

總共用到6個API：

瀏覽器是否支持全屏模式：document.fullscreenEnabled
使元素進入全屏模式：Element.requestFullscreen()
退出全屏：document.exitFullscreen()
檢查當前是否有節(jié)點處于全屏狀態(tài)：document.fullscreenElement
進入全屏/離開全屏麦撵，觸發(fā)事件：document.fullscreenchange
無法進入全屏時觸發(fā): document.fullscreenerror

瀏覽器前綴：

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

1.1 屬性

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

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

const fullscreenEnabled =
 document.fullscreenEnabled ||
 document.mozFullScreenEnabled ||
 document.webkitFullscreenEnabled ||
 document.msFullscreenEnabled;

if (fullscreenEnabled) {
 videoElement.requestFullScreen();
} else {
 console.log('瀏覽器當前不能全屏');
}

1.1.2 返回全屏狀態(tài)的Element節(jié)點document.fullscreenElement

fullscreenElement屬性返回正處于全屏狀態(tài)的Element節(jié)點诗充，如果當前沒有節(jié)點處于全屏狀態(tài)棍郎，則返回null

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

1.2 方法

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

Fullscreen(domName) {
  const element = document.querySelector(domName); // 獲取dom
  const methodName =
    this.prefixName === ''
      ? 'requestFullscreen'
      : `${this.prefixName}RequestFullScreen`; // API前綴
  element[methodName](); // 調(diào)用全屏
}
復制代碼

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

MDN：例如<iframe> 元素具有 allowfullscreen 屬性涂佃，可選擇是否將其內(nèi)容以全屏模式顯示

這種不被允許全屏的元素屬于極少數(shù)情況。
全屏請求必須在事件處理函數(shù)(點擊事件等)中調(diào)用汽抚，否則將會被拒絕伯病。

初始化直接全屏否过，會觸發(fā)進入全屏失敗回調(diào)惭蟋。因為這樣那就是容易造成欺騙告组，因為使用了全屏幕API，就會欺騙到人木缝，被成功釣魚我碟。大概意思是這樣的，看另一個例https://feross.org/html5-fullscreen-api-attack/

1.2.2 退出全屏：document.exitFullscreen()

document對象的exitFullscreen方法用于取消全屏

function exitFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.msExitFullscreen) {
    document.msExitFullscreen();
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  }
}

exitFullscreen();

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

1.3 全屏事件

1.3.1 進入全屏/離開全屏厘托，觸發(fā)事件：document.fullscreenchange

當我們進入全屏和離開全屏的時候催烘，都會觸發(fā)一個fullscreenchange事件缎罢。

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

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

可以說相當不人性化了蔽挠！但我們可以通過檢查當前是否有節(jié)點處于全屏狀態(tài)，判斷當前是否處于全屏模式比原。

document.addEventListener("fullscreenchange", function( event ) {
  if (document.fullscreenElement) {
    console.log('進入全屏');
  } else {
    console.log('退出全屏');
  }
});

1.3.2 無法進入全屏時觸發(fā): document.fullscreenerror

瀏覽器無法進入全屏時觸發(fā)，可能是技術原因雇寇，也可能是用戶拒絕绑改。

比如全屏請求不是在事件處理函數(shù)中調(diào)用,會在這里攔截到錯誤

screenError(enterErrorFn) {
  const methodName = `on${this.prefixName}fullscreenerror`;
  document[methodName] = e => {
    enterErrorFn && enterErrorFn(e)
  };
}
復制代碼

1.4 全屏狀態(tài)的CSS

1.4.1 :full-screen偽類

全屏狀態(tài)下，大多數(shù)瀏覽器的CSS支持:full-screen偽類识腿，只有IE11支持:fullscreen偽類造壮。使用這個偽類，可以對全屏狀態(tài)設置單獨的CSS屬性成箫。

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

1.4.2 :backdrop 偽元素

全屏模式的元素下的即刻渲染的盒子（并且在所有其他在堆中的層級更低的元素之上）蹬昌，可用來給下層文檔設置樣式或隱藏它

默認設置背景灰

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

默認樣式：

: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;
}

1.5 在項目中使用
由于我這個個項目用到的是Vue里面用到了這個庫昆汹，它對各個方法和屬性做了很好的兼容，在開發(fā)中可以作參考辈末。用法很簡單，導入庫映皆，就可以直接這樣調(diào)用方法：

fscreen.requestFullscreen(element)
// replacement for: element.requestFullscreen - without calling the function
// mapped to: element.vendorMappedRequestFullscreen

我項目中js使用如下所示

import fscreen from "fscreen";
import Message from "@/components/Message";
export default {
  name: "FullScreen",
  components: {},
  data() {
    return {
      isFullscreen: false
    };
  },

  computed: {
    fullscreenEnabled() {
      return fscreen.fullscreenEnabled;
    },

    fullscreenElement() {
      return JSON.stringify(fscreen.fullscreenElement);
    }
  },

  methods: {
    onTriggerClick(e) {
      if (this.isFullscreen) {
        this.onExitFullsreen();
      } else {
        this.requestFullscreen(document.querySelector(".fullscreen-content"));
      }
      this.isFullscreen = !this.isFullscreen;
    },

    requestFullscreen(ele) {
      if (fscreen.requestFullscreen) {
        return fscreen.requestFullscreen(ele);
      } else {
        alert("瀏覽器不支持全屏API");
      }
    },

    onExitFullsreen() {
      if (fscreen.exitFullscreen) {
        return fscreen.exitFullscreen();
      } else {
        alert("瀏覽器不支持全屏API");
      }
    }
  },

  mounted() {
    fscreen.addEventListener("fullscreenchange", e => {
      Message.info(this.isFullscreen ? "進入全屏" : "退出全屏");
      console.log(e);
    });

    fscreen.addEventListener("fullscreenerror", e => {
      Message.info("全屏切換出錯");
      console.log(e);
    });
  }
};

參考資料

Fullscreen API
Element.requestFullscreen()
Fullscreen API
How to Use the HTML5 Full-Screen API
https://github.com/rafrex/fscreen