不常用的浏览器 API —— Fullscreen

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第6天，点击查看活动详情。

上一节介绍 Multi-Screen Window Placement API 时提到了 Fullscreen，这是一个全屏相关的 API，在实际开发中这个 API 适用场景也不是很多，本文来看一下 Fullscreen。

Fullscreen 相关的 API 位于 Document 和 Element 上，他可以实现页面或页面上某个元素的全屏展示效果，它的核心 API 为 requestFullscreen() 和 exitFullscreen() ，分别对应进入全屏和退出全屏。

先来看进入全屏，requestFullscreen 位于 Element 上，因此每个元素节点都可以调用全屏模式，他返回一个 Promise，当全屏状态切换时也会触发 fullscreenchange 或 fullscreenerror 事件，它的参数为 navigationUI，表示是否显示导航 UI，此外随着 Multi-Screen Window Placement API 引入后全屏可以选择指定的显示器。浏览器中某一个元素全屏后会隐藏其他元素，只显示当前全屏元素和其子元素。

退出全屏的 exitFullscreen API 位于 Document 上，因为一旦进入全屏就需要整体退出全屏，不存在将某一部分退出全屏的需求，因此直接调用 document.exitFullscreen 即可实现退出全屏的效果。这里有一个场景，当一个元素进入全屏时，调用另一个元素进入全屏，此时调用退出全屏，这时第二个元素会退出全屏，但是第一个元素还是在全屏状态，需要再次调用退出全屏才会退出，这里在浏览器内部会维护这样一个全屏的栈。

一个全屏切换的例子：

document.onclick = function (event) {
  if (document.fullscreenElement) {
    document.exitFullscreen()
  } else {
    document.documentElement.requestFullscreen()
  }
};

在实际开发中，我们可能很少会对某个元素进行全屏，全屏整个页面的需求可能比较多，这里就可以使用上面的实现，全屏之后的效果和用户的操作系统也有关，不同平台的显示也不完全一致。