揭秘 Web 全屏模式与 JavaScript 事件监听：onfullscreenchange 与 onfullscreenerror 深度解析

2023-12-16 10:34:25

Web 全屏模式与 JavaScript

Web 全屏模式是一种允许网页或 Web 应用在整个屏幕上显示内容的模式，从而提供更加沉浸式的用户体验。当进入全屏模式时，浏览器的界面元素（如工具栏、地址栏等）通常会被隐藏，网页内容将占据整个屏幕。

在 JavaScript 中，可以通过 document.documentElement.requestFullscreen() 方法来进入全屏模式。退出全屏模式可以通过 document.exitFullscreen() 方法。

onfullscreenchange 事件

onfullscreenchange 事件用于监听全屏模式的状态变化。当全屏模式进入或退出时，该事件都会被触发。

document.addEventListener('fullscreenchange', (event) => {
  // 全屏模式状态发生改变时执行此函数
});

fullscreenchange 事件有一个 fullscreenElement 属性，该属性表示当前处于全屏模式的元素。如果 fullscreenElement 属性为 null，则表示当前没有元素处于全屏模式。

document.addEventListener('fullscreenchange', (event) => {
  if (document.fullscreenElement) {
    // 进入全屏模式
  } else {
    // 退出全屏模式
  }
});

onfullscreenerror 事件

onfullscreenerror 事件用于监听全屏模式请求失败时发生的错误。例如，当用户尝试进入全屏模式时，如果浏览器不支持全屏模式或当前元素不允许进入全屏模式，则会触发 onfullscreenerror 事件。

document.addEventListener('fullscreenerror', (event) => {
  // 全屏模式请求失败时执行此函数
});

fullscreenerror 事件有一个 fullscreenError 属性，该属性表示全屏模式请求失败的原因。

document.addEventListener('fullscreenerror', (event) => {
  switch (event.fullscreenError) {
    case 'no-fullscreen-element':
      // 当前没有元素可以进入全屏模式
      break;
    case 'not-allowed-to-enter-fullscreen':
      // 当前元素不允许进入全屏模式
      break;
    case 'not-allowed-to-exit-fullscreen':
      // 当前元素不允许退出全屏模式
      break;
  }
});