Marting424
Marting424

H5全屏展示

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

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

chrome下的全屏表现：

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

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

全屏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前缀
elementmethodName; // 调用全屏
}

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

  1. MDN：例如