Web API 之 — Fullscreen API

今天突然发现 Fullscreen API 竟然是在 Element 上的方法，之前一直以为是 window 上的，所以今天就来梳理一下这块儿的知识，全面地了解一下。

首先 Fullscreen API 提供的方法都是作用在 Element 和 Document 上的，所以，是可以让某个元素全屏展示的。接下来，我们来看如何全屏和退出全屏。

全屏和退出全屏

全屏对应 Element.requestFullscreen() 和退出全屏对应 Document.exitFullscreen()，你没看错，这两个方法一个是在 Element 上，一个是在 Document 上，感觉比较奇葩。这两个方法都是返回一个 Promise，当全屏或退出全屏结束时，Promise 会被 resolve。

这里有一点要注意的是，由于 requestFullscreen 是作用在某个元素上，所以全屏后的内容只有这个元素，如果你要把整个页面放到全屏，应该作用到 html 元素上，使用 document.documentElement.requestFullscreen()来操作，如果只是作用到 body 上，那么除了 body 的其它内容就没有在全屏中，可能会出现不符合你预期的效果。

获取全屏元素和判断是否可全屏

通过 document.fullscreenElement 可以获取到当前正在全屏的元素，如果没有元素全屏，则返回 null。

document.documentElement.requestFullscreen().then(() => {
	console.log(document.fullscreenElement === document.documentElement)
	// true
})
console.log(document.fullscreenElement === document.documentElement)
// false

通过 document.fullscreenEnabled 可以用来判断元素是否可以全屏展示，如果浏览器全屏模式不支持，则返回 false

关于全屏的事件

关于全屏的事件有两个fullscreenchange 和 fullscreenerror，这两个事件绑定到 Document 或 Element 上，具体含义也都很明显。fullscreenchange 是在全屏模式变化时触发，fullscreenerror 是在全屏模式切换报错时触发。看下具体例子：

document.addEventListener('fullscreen