全屏 API - JavaScript

全屏 API 是一组可用于在 JavaScript 中将网页元素全屏显示的 API。它包含两个部分：请求全屏和退出全屏。

请求全屏

全屏 API 允许通过 JavaScript 请求全屏，使一个元素充满整个屏幕。

let element = document.getElementById('my-element');
if (element.requestFullscreen) {
  element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
  element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
  element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) {
  element.msRequestFullscreen();
}

此方法会将元素全屏，覆盖整个 Web 页面。请注意，可以将请求全屏功能与用户事件（例如单击或触摸）一起使用，以允许用户授予或拒绝全屏请求。

退出全屏

全屏 API 还允许通过 JavaScript 退出全屏，将元素恢复到其原始大小。

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

监听全屏事件

全屏 API 还提供了两个事件：全屏更改事件和转换事件。

document.addEventListener('fullscreenchange', (e) => {
  console.log(`Full screen change event: ${e}`);
});

document.addEventListener('fullscreenerror', (e) => {
  console.log(`Full screen error event: ${e}`);
});

全屏更改事件会在元素进入或退出全屏模式时触发。全屏错误事件会在请求全屏时出现错误时触发。

结论

通过全屏 API 可以将各种元素全屏显示，例如视频或预览图。这使用户可以更好地体验您的 Web 应用程序。全屏 API 可以与用户事件一起使用，以允许用户授予或拒绝全屏请求。