窗口管理 API

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

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 权限策略 控制对窗口管理 API 的权限。具体来说

• 使用 Window.getScreenDetails() 方法。如果被阻止，它的 Promise 将会拒绝并抛出一个 NotAllowedError 异常。
• 查询 Window.screen.isExtended 属性。如果被阻止，它将始终返回 false。

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

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

ScreenDetails 安全上下文

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

ScreenDetailed 安全上下文

表示用户设备上一个特定屏幕的详细信息。

The Screen change 事件 安全上下文

当特定屏幕以某种方式发生变化时触发——例如可用宽度或高度，或方向。

Screen.isExtended 安全上下文

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

Element.requestFullscreen()，screen 选项

指定要在哪个屏幕上将元素置于全屏模式。

Window.getScreenDetails() 安全上下文

返回一个 Promise，该 Promise 将以 ScreenDetails 对象实例作为结果完成。

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

• 基本的多个窗口学习环境（请参阅 源代码）。
• 多个窗口平台游戏（请参阅 源代码）。
• Elmer 风格的交易台演示（请参阅 源代码）。
• 窗口放置演示（请参阅 源代码）。