視窗管理 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 學習環境（請參閱 原始碼）。
• 多視窗平臺遊戲（請參閱 原始碼）。
• 視窗放置演示（請參閱 原始碼）。

規範

瀏覽器相容性