前端实现全屏

# 前端实现全屏

主要 API

全屏是否可用：Document.fullscreenEnabled
开启全屏：Document.requestFullScreen()
退出全屏：Document.exitFullscreen()
获取全屏元素：document.mozFullScreenElement
监听全屏模式变化: fullscreenchange

# Document.fullscreenEnabled

兼容性写法

function fullscreenEnabled() {
  return (
    document.fullscreenElement ||
    document.mozFullScreenElement ||
    document.webkitFullscreenElement
  )
}

1
2
3
4
5
6
7

# Element.requestFullscreen()

Element.requestFullscreen()方法用于发出异步请求使元素进入全屏模式。作用是请求浏览器将指定的元素设置为全屏模式，结果会返回一个 Promise，全屏模式被激活的时候变成 resolved 状态。

如果全屏模式被禁用或者不支持，则会返回 reject。Document.fullscreenEnabled 可用来判断是否支持全屏模式。

function fullscreen(element) {
  if (document.mozFullScreenEnabled) {
    return Promise.reject(new Error('全屏模式被禁用'))
  }
  let result = null
  if (element.requestFullscreen) {
    result = element.requestFullscreen()
  } else if (element.mozRequestFullScreen) {
    result = element.mozRequestFullScreen()
  } else if (element.msRequestFullscreen) {
    result = element.msRequestFullscreen()
  } else if (element.webkitRequestFullscreen) {
    result = element.webkitRequestFullScreen()
  }
  return result || Promise.reject(new Error('不支持全屏'))
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# Document.exitFullscreen()

Document.exitFullscreen() 方法用于让当前文档退出全屏模式。元素恢复到之前的状态。

MDN 有这样的一个备注：

如果一个元素 A 在请求进去全屏模式之前，已经存在其他元素处于全屏状态，当这个元素 A 退出全屏模式之后，之前的元素仍然处于全屏状态。浏览器内部维护了一个全屏元素栈用于实现这个目的

Document.exitFullscreen() 方法让全屏元素栈的栈顶元素退出全屏状态，并让新的栈顶的元素进入全屏状态

这意味着可以有多个元素同时全屏。并且这些全屏的元素被存储在一个栈中。

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

1
2
3
4
5
6
7
8
9
10
11

# 兼容性

手机端全都不支持，pc端如下：

上次更新: 2023/04/05, 09:41:10