js 网页全屏事件

在JavaScript中，网页全屏事件主要涉及两个：fullscreenchange 和 fullscreenerror。这些事件用于监听网页是否进入或退出全屏模式，以及在全屏请求失败时触发。

基础概念

fullscreenchange：当文档的全屏状态改变时触发。可以通过 document.fullscreenElement 来检查当前是否处于全屏模式，以及哪个元素处于全屏状态。
fullscreenerror：当全屏请求失败时触发。这可能是由于用户拒绝授权、浏览器不支持全屏API或其他原因造成的。

应用场景

视频播放器：当用户点击播放按钮时，请求全屏以提供更好的观看体验。
游戏：在游戏中提供全屏选项，让玩家沉浸在游戏世界中。
教育软件：在全屏模式下展示教学内容，减少干扰。

示例代码

以下是一个简单的示例，演示如何使用JavaScript请求全屏并监听全屏事件：

// 请求全屏
function requestFullScreen(element) {
  if (element.requestFullscreen) {
    element.requestFullscreen();
  } else if (element.mozRequestFullScreen) { // Firefox
    element.mozRequestFullScreen();
  } else if (element.webkitRequestFullscreen) { // Chrome, Safari and Opera
    element.webkitRequestFullscreen();
  } else if (element.msRequestFullscreen) { // IE/Edge
    element.msRequestFullscreen();
  }
}

// 监听全屏变化事件
document.addEventListener('fullscreenchange', function () {
  if (document.fullscreenElement) {
    console.log('进入全屏模式');
  } else {
    console.log('退出全屏模式');
  }
});

// 监听全屏错误事件
document.addEventListener('fullscreenerror', function () {
  console.log('全屏请求失败');
});

// 使用示例：点击按钮请求全屏
document.getElementById('fullscreen-button').addEventListener('click', function () {
  requestFullScreen(document.documentElement); // 请求整个文档全屏
});