全屏实现

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

demo

MDN介绍：

使用提供的API，让一个元素与其子元素，可以占据整个屏幕，并在此期间，从屏幕上隐藏所有的浏览器用户界面以及其他应用。

chrome下的全屏表现：

1. 全屏会隐藏标签栏,书签栏

2. 如果网页一开始不是全部撑开的形式，全屏下，也会将要全屏的元素充满整个屏幕

---

1. 全屏API：

总共用到6个API：

1. 浏览器是否支持全屏模式：document.fullscreenEnabled
2. 使元素进入全屏模式：Element.requestFullscreen()
3. 退出全屏：document.exitFullscreen()
4. 检查当前是否有节点处于全屏状态：document.fullscreenElement
5. 进入全屏/离开全屏，触发事件：document.fullscreenchange
6. 无法进入全屏时触发: document.fullscreenerror

浏览器前缀：

目前并不是所有的浏览器都实现了API的无前缀版本，所以我们需要针对不同浏览器，做一下API的兼容:

1.1 属性

1.1.1 浏览器是否支持全屏模式：document.fullscreenEnabled

document.fullscreenEnabled属性返回一个布尔值，表示当前文档是否可以切换到全屏状态。

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

if (fullscreenEnabled) {
 videoElement.requestFullScreen();
} else {
 console.log('浏览器当前不能全屏');
}

1.1.2 返回全屏状态的Element节点document.fullscreenElement

fullscreenElement属性返回正处于全屏状态的Element节点，如果当前没有节点处于全屏状态，则返回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](); // 调用全屏
}
复制代码

值得注意的是：调用此API并不能保证元素一定能够进入全屏模式

1. MDN：例如