窗口管理 API

概念与用法

历史上，我们使用 Window.open() 来管理与当前应用程序相关的浏览器窗口 — 打开新窗口、调整现有窗口大小和关闭现有窗口等。例如，要打开一个 400×300 的窗口，距离屏幕左侧和顶部 50 像素

const myWindow = window.open(
  "https://example.com/",
  "myWindow",
  "left=50,top=50,width=400,height=300",
);

您可以通过 Window.screen 属性检索有关屏幕的信息，例如您有多少可用屏幕空间来放置窗口。

然而，上述功能是有限的。Window.screen 只返回有关主屏幕的数据，而不会返回设备可用的辅助显示器的数据。要将窗口移动到辅助显示器，您可以使用 Window.moveTo()，但您必须根据它在您的设置中相对于主显示器的位置来猜测要使用的坐标。

窗口管理 API 提供了更强大、更灵活的窗口管理。它允许您查询您的显示器是否扩展了多个屏幕，并单独获取每个屏幕的信息：然后可以根据需要将窗口放置在每个屏幕上。它还提供了事件处理程序，使您能够响应可用屏幕的变化、新的全屏功能以选择要进入全屏模式的屏幕（如果有的话），以及权限功能来控制对 API 的访问。

有关如何使用它的详细信息，请参阅 使用窗口管理 API。

用例

窗口管理 API 在以下情况下非常有用：

• 可能希望跨不同屏幕排列编辑工具和面板的多窗口图形编辑器和音频处理器。
• 希望在多个窗口中显示市场趋势并将特定感兴趣的窗口置于全屏模式的虚拟交易台。
• 希望在内部主屏幕上显示演讲者备注，并在外部投影仪上显示演示文稿的幻灯片放映应用程序。

权限策略集成

window-management Permissions-Policy 可用于控制使用窗口管理 API 的权限。具体来说：

• 使用 Window.getScreenDetails() 方法。如果被阻止，其 Promise 将因 NotAllowedError 异常而拒绝。
• 查询 Window.screen.isExtended 属性。如果被阻止，它将始终返回 false。

开发人员可以通过 allow 属性显式授予 <iframe> 使用窗口管理的权限。

<iframe src="3rd-party.example" allow="window-management"></iframe>

接口

ScreenDetails 安全上下文

表示用户设备可用的所有屏幕的详细信息。

ScreenDetailed 安全上下文

表示用户设备可用的单个屏幕的详细信息。

其他接口的扩展

Screen change 事件 安全上下文

当特定屏幕发生某些更改时（例如可用宽度或高度，或方向）在其上触发。

Screen.isExtended 安全上下文

一个布尔属性，如果用户设备有多个屏幕，则返回 true，否则返回 false。

Element.requestFullscreen()，screen 选项

指定要在哪个屏幕上使元素全屏。

Window.getScreenDetails() 安全上下文

返回一个 Promise，该 Promise 以 ScreenDetails 对象实例完成。

示例

您可以在此处找到完整的示例：

• 基本的窗口管理 API 学习环境（请参阅 源代码）。
• 多窗口平台游戏（请参阅 源代码）。
• 窗口放置演示（请参阅 源代码）。

规范

浏览器兼容性