关于全屏 API 你需要知道的一切💻

在很多情况下，我们都希望以全屏模式查看网页。无论是玩游戏、在线课程、视频教程，还是只是想在阅读时获得更多的阅读空间。在这种情况下，我们通常会手动将浏览器的标签页/窗口设置为全屏模式 ( F11)，但结果并不总是如我们所愿，因为有些内容并非设计为在全屏模式下显示。此外，如果我们能够帮助用户自动进入全屏模式，那么这一切最终都会带来更好的用户体验。

简介

全屏 API为 HTML 添加了方法Element，使我们能够通过 JavaScript 以编程方式将页面上的任何内容转换为全屏模式。WebGL、canvas和video元素是全屏模式的常见目标。在线报纸和杂志也是这项技术的应用领域。

因此，让我们首先看看它的实际效果，然后再了解一些细节：

我们在这里所做的就是调用全屏 API 添加的方法：

const vid = document.getElementById('shuttle');

function toggleFullScreen() {
  if (!document.fullscreenElement && vid.requestFullscreen) {
    vid.requestFullscreen();
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen(); 
    }
  }
}

document.addEventListener("keydown", function(e) {
  if (e.keyCode == 13) {
    toggleFullScreen();
  }
}, false);

暴露的属性

该document对象暴露了两个属性：

💡DocumentOrShadowRoot.fullscreenElement

该fullscreenElement属性将返回当前以全屏模式显示的元素。它可以用来检查我们是否处于全屏模式。

💡Document.fullscreenEnabled

该fullscreenEnabled属性告诉您文档当前是否处于允许请求全屏模式的状态。

退出全屏

您需要确保让用户知道他们可以按下Esc键（或F11）退出全屏模式。

此外，在全屏模式下导航到另一个页面、更改选项卡或切换到另一个应用程序（例如，使用Alt- Tab）也会退出全屏模式。

正如您在上面的示例中看到的，可以使用以下命令退出全屏模式document.exitFullscreen：

if (document.exitFullscreen) {
  document.exitFullscreen(); 
}

特征检测

document.requestFullscreen您可以使用或简单地检测该功能是否受支持Element.requestFullscreen：

if(element.requestFullscreen) {
  element.requestFullscreen();
}

或者：

if(document.requestFullscreen) {
  // enter fullscreen mode
}

判断您是否处于全屏模式

如前所述，这document.fullscreenElement是一个检查浏览器是否处于全屏模式的好方法。null如果浏览器未处于全屏模式，则此属性的值将为；否则，则为当前全屏元素。

⚠️ 还有一个boolean名为 的属性fullscreen，它已被弃用，不应再使用。尽管大多数浏览器仍然支持它。

推介会

当以编程方式切换全屏模式时，您需要控制元素的外观以及在屏幕上显示的内容。显然，您需要将元素的宽度和高度更改为%100，幸运的是，有一个 CSS 伪选择器可供您使用：

#shuttle:fullscreen {
  width: 100%;
  height: 100%;
}

您可能还想隐藏屏幕上的一些其他元素以减少混乱：

:fullscreen .hide {
  display: none;
}

浏览器支持

目前浏览器支持情况非常好，几乎所有主流浏览器都完全支持。只有IE11和Safari部分支持。Opera mini 和 Android 浏览器目前不支持。

如果您不知道这个 API，希望您已经学到了一个新技巧，并且祝您全屏愉快（只是编造了这个词😁）。