js全屏模式
# js全屏模式
demo地址：github (opens new window)
# 全屏API
全屏 API 为使用用户的整个屏幕展现网络内容提供了一种简单的方式，并且在不需要时退出全屏模式。这种 API 让你可以简单地控制浏览器，使得一个元素与其子元素，如果存在的话，可以占据整个屏幕，并在此期间，从屏幕上隐藏所有的浏览器用户界面以及其他应用。
可以在全屏 API 指南这篇文章了解更多细节。
注意：当前并不是所有的浏览器都支持该 API，大多数浏览器需要使用供应商前缀或者尚未实现该规范。下面的浏览器兼容性表 Browser compatibility 可以看到各个浏览器对此的支持（你也可以使用 Fscreen 来提供跨浏览器 API 访问）。
# 接口
全屏 API 没有它自己的接口实现。相反，它提供了一些其他接口以供实现全屏所需的方法、属性、事件处理函数。接下来会列出所有细节。
# 方法
全屏 API 在 Document 和 Element 接口中增加了一些方法，可用于允许打开关闭全屏模式。
# Document 中的方法
Document.exitFullscreen()
用于请求从全屏模式切换到窗口模式，会返回一个 Promise，会在全屏模式完全关闭的时候被置为 resolved 状态。
# Element 中的方法
Element.requestFullscreen()
请求浏览器（user agent）将特定元素（甚至延伸到它的后代元素）置为全屏模式，隐去屏幕上的浏览器所有 UI 元素，以及其它应用。返回一个 Promise，并会在全屏模式被激活的时候变成 resolved 状态。
# 属性
Document 提供了可以用于判断是否支持和启用全屏模式的属性，也能得知现在是否处在全屏模式、哪一个元素在使用屏幕等信息。
DocumentOrShadowRoot.fullscreenElement
fullscreenElement 属性提供了当前在 DOM （或者 shadow DOM）里被展示为全屏模式的 Element，如果这个值为 null，文档不处于全屏模式。
Document.fullscreenEnabled
fullscreenEnabled 属性提供了启用全屏模式的可能性。当它的值是 false 的时候，表示全屏模式不可用（可能的原因有 "fullscreen" 特性不被允许，或全屏模式不被支持等 ）。
# 事件处理程序
Fullscreen API 定义了两个事件，可用于检测全屏模式的打开和关闭，以及在全屏和窗口模式之间切换过程中发生的错误。Document 和 Element 接口提供了这些事件的事件处理函数。
注意：这些事件处理函数特性不可以当成 HTML 内容属性来使用。 换句话说，你无法在 HTML 内容中为 fullscreenchange (en-US) 和 fullscreenerror (en-US) 指定事件处理程序，你必须通过 JavaScript 代码添加它们。
# Document 上的事件处理程序
Document.onfullscreenchange fullscreenchange (en-US) 事件的处理程序，当进入全屏或退出全屏时，事件将被发送到Document上。此处理程序仅在整个文档全屏模式更改时有效。
Document.onfullscreenerror fullscreenerror (en-US) 事件的处理程序，当进入全屏或退出全屏出错时，事件将被发送到 Document 上，仅对整个文档的全屏模式更改出错时候有效。
# Element 上的事件处理程序
Element.onfullscreenchange
当全屏事件发生时，该事件会被发送到该元素，表明该元素进入或退出全屏模式
Element.onfullscreenerror fullscreenerror (en-US) 事件的处理程序，当指定的 Element 改变全屏模式时候出现错误，该事件将被发送到指定的 Element 上。
# 废弃属性
Fullscreen API 定义了两个事件，可用于检测全屏模式的打开和关闭，以及在全屏和窗口模式之间切换过程中发生的错误。Document 和 Element 接口提供了这些事件的事件处理函数。
注意：这些事件处理函数特性不可以当成 HTML 内容属性来使用。 换句话说，你无法在 HTML 内容中为 fullscreenchange (en-US) 和 fullscreenerror (en-US) 指定事件处理程序，你必须通过 JavaScript 代码添加它们。
# Dictionaries
FullscreenOptions (en-US)
在调用 requestFullscreen() 时可以设置选项。
# 访问控制
全屏模式可由功能策略（ Feature Policy）控制。全屏模式功能由字符串“full screen”标识，默认的允许列表值为“self”，这意味着在顶级文档上下文 以及 从与顶级文档相同的源加载的嵌套上下文中允许使用全屏模式。
请参阅使用功能策略（ Feature Policy ）以了解有关使用功能策略控制对API的访问的更多信息。
# 使用说明
用户通过按 ++==ESC==++ 键（或 ++==F11==++）即可退出全屏模式，而不是等着站点或应用的代码来做这件事。确定你在你的用户界面里提供合适的界面元素来告知用户这个可选项。
注意：当处在全屏模式中，浏览其他页面，切换标签页，或者切换到其他应用（例如使用 Alt-Tab）也会导致退出全屏模式。
# 浏览器兼容性
所有的浏览器都实现了这个API。然而一些带有前缀的实现在拼写上略微有些差别；例如，不同于 requestFullscreen()，存在一个 MozRequestFullScreen()。
