全屏 API

全屏 API 本身没有接口。相反，它增强了其他几个接口，以添加提供全屏功能所需的方法、属性和事件处理程序。这些将在以下部分中列出。

全屏 API 向 Document 和 Element 接口添加了一些方法，允许打开和关闭全屏模式。

Document.exitFullscreen()

请求 用户代理 从全屏模式切换回窗口模式。返回一个 Promise，该承诺在完全关闭全屏模式后解决。

Element.requestFullscreen()

要求用户代理将指定元素（及其后代）置于全屏模式，移除所有浏览器的 UI 元素以及屏幕上的所有其他应用程序。返回一个 Promise，该承诺在全屏模式激活后解决。

Document.fullscreenElement / ShadowRoot.fullscreenElement

fullscreenElement 属性告诉您当前在 DOM（或阴影 DOM）上以全屏模式显示的 Element。如果为 null，则文档（或阴影 DOM）不在全屏模式下。

Document.fullscreenEnabled

fullscreenEnabled 属性告诉您是否可以启用全屏模式。如果全屏模式由于任何原因不可用（例如，不允许使用“全屏”功能，或不支持全屏模式），则为 false。

Document.fullscreen 已弃用

如果文档当前有一个元素以全屏模式显示，则为 true；否则，返回 false。

注意：请改用 fullscreenElement 属性，它位于 Document 或 ShadowRoot 上；如果它不为 null，则它是一个当前以全屏模式显示的 Element。

fullscreenchange

当元素切换到全屏模式或退出全屏模式时，发送到 Element。

fullscreenerror

如果在尝试切换元素进入或退出全屏模式时发生错误，则发送到元素。

可以使用 权限策略 控制全屏模式的可用性。全屏模式功能由字符串 "fullscreen" 标识，默认允许列表值为 "self"，这意味着全屏模式在顶级文档上下文中允许，以及在从与顶级文档相同来源加载的嵌套浏览上下文允许。

用户可以选择通过按 ESC（或 F11）键退出全屏模式，而不是等待站点或应用程序以编程方式退出。请确保在您的用户界面中提供适当的用户界面元素，以告知用户此选项可用。

在此示例中，视频在网页中呈现。按下 Enter 键可让用户在视频的窗口模式和全屏模式之间切换。

查看实时示例

监视 Enter 键

加载页面时，将运行此代码以设置一个事件监听器来监视 Enter 键。

document.addEventListener(
  "keydown",
  (e) => {
    if (e.key === "Enter") {
      toggleFullScreen();
    }
  },
  false,
);

切换全屏模式

当用户按下 Enter 键时，上述事件处理程序将调用此代码。

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

首先查看 document 的 fullscreenElement 属性的值。在实际部署中，您需要在此处检查该属性的前缀版本（例如 mozFullScreenElement、msFullscreenElement 或 webkitFullscreenElement）。如果该值为 null，则文档当前处于窗口模式，因此我们需要切换到全屏模式；否则，它就是当前处于全屏模式的元素。通过对 <video> 元素调用 Element.requestFullscreen() 来切换到全屏模式。

如果全屏模式已激活（fullscreenElement 不为 null），则在 document 上调用 exitFullscreen() 来关闭全屏模式。

• Element.requestFullscreen()
• Document.exitFullscreen()
• Document.fullscreen
• Document.fullscreenElement
• :fullscreen, ::backdrop
• allowfullscreen