Chrome全屏API

在 Web 应用程序中，全屏模式使用户能够更好地关注内容，而不被浏览器的界面干扰。Chrome 全屏 API 提供了一种简单的方法来实现全屏体验。

实现全屏模式

要将您的 Web 应用程序设置为全屏模式，请使用 requestFullscreen() 方法。例如，以下代码段将整个文档设置为全屏模式：

const element = document.documentElement;
if (element.requestFullscreen) {
  element.requestFullscreen();
} else if (element.webkitRequestFullscreen) { /* Safari */
  element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) { /* IE11 */
  element.msRequestFullscreen();
}

退出全屏模式

要退出全屏模式，请使用 exitFullscreen() 方法。例如，以下代码段将整个文档退出全屏模式：

if (document.exitFullscreen) {
  document.exitFullscreen();
} else if (document.webkitExitFullscreen) { /* Safari */
  document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { /* IE11 */
  document.msExitFullscreen();
}

检测全屏模式

您可以使用 fullscreenElement 属性检查文档是否处于全屏模式。如果文档已进入全屏模式，则该属性将返回表示文档的元素。

if (document.fullscreenElement) {
  console.log(`Element ${document.fullscreenElement.id} is in fullscreen mode.`);
} else {
  console.log('No element is in fullscreen mode.');
}

监听全屏事件

您可以使用 fullscreenchange 事件在文档进入或退出全屏模式时执行操作。

document.addEventListener('fullscreenchange', (event) => {
  if (document.fullscreenElement) {
    console.log(`Element ${document.fullscreenElement.id} entered fullscreen mode.`);
  } else {
    console.log('Exited fullscreen mode.');
  }
});

总结

Chrome 全屏 API 是实现全屏体验的简单方法。使用 requestFullscreen() 方法将您的应用程序设置为全屏模式，使用 exitFullscreen() 方法退出全屏模式。检查 fullscreenElement 属性以确定文档是否处于全屏模式，并通过监听 fullscreenchange 事件执行操作。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/13075