為全螢幕彈出式視窗新增來源試用

Thomas Steiner

假設您想要以全螢幕模式開啟彈出式視窗。目前，開啟包含兩個步驟的全螢幕彈出式視窗：

  1. 在主要應用程式視窗中，呼叫需要使用者手勢的 window.open() 方法，例如按一下「開啟彈出式視窗」按鈕。
  2. 在彈出式視窗中呼叫 Element.requestFullscreen() 方法，同樣需要使用者手勢，例如按下「進入全螢幕模式」按鈕。

最新推出 來源試用 從 Chrome 119 (穩定日期) 執行： 122 (穩定日期)： 2023 年 10 月 31 日開始支援 Chrome 122 (穩定日期： 10 月 31 日，開啟 10 月 31 日完整畫面)。 在「Open pops as fullscreen windows」來源試用到達網頁上，按一下「Register」即可進行註冊。 除了來源試用外，您也可以將 chrome://flags/#fullscreen-popup-windows 標記設為「Enabled」，在本機進行測試。

正在開啟目前畫面上的全螢幕彈出式視窗

這項新功能會受到 window-management 權限管制。使用者授予權限後，您可以開啟全螢幕彈出式視窗，如以下範例所示。

document.querySelector('.fullscreen-popoup-button').addEventListener('click', async (e) => {
  if ((await navigator.permissions.query({name: 'window-management'})).state !== 'granted') {
    // Permission not granted. Call `window.getScreenDetails()` to prompt.
    await window.getScreenDetails();
  }
  // Permission granted. Open the fullscreen popup window.
  window.open('https://example.com/popup.html', '_blank', 'popup,fullscreen');
});

在程式碼範例的最後一行，第一個參數是在彈出式視窗中開啟的 url。第二個參數為 target，具有特殊值為 _blank。第三個參數適用於 windowFeatures，這是以半形逗號分隔的字串，其中包含 popup 值 (用來開啟彈出式視窗)，而新的值 fullscreen 用於在全螢幕模式中開啟彈出式視窗。這僅適用於單一使用者手勢，因此只要按一下按鈕就能啟用。

在其他畫面上開啟全螢幕彈出式視窗

這項功能非常適合與 Window Management API 搭配使用，可讓您取得使用者已連線至電腦的所有畫面相關資訊。舉例來說，如要在使用者目前畫面以外的其他畫面上開啟全螢幕彈出式視窗，您必須先找到另一個畫面，然後將其 availLeft、availTop、availWidth 和 availHeight 值傳遞至 windowFeatures 字串的對應 left、top、width 和 height 值。


document.querySelector('.fullscreen-popoup-button-other-screen').addEventListener('click', async (e) => {
  const screenDetails = await window.getScreenDetails();
  ​​const otherScreen = screenDetails.screens.find(s => s !== screenDetails.currentScreen);
  window.open('https://example.com/popup.html', '_blank', `left=${otherScreen.availLeft},` +
      `top=${otherScreen.availTop},` +
      `width=${otherScreen.availWidth},` +
      `height=${otherScreen.availHeight},` +
      `fullscreen`);
});

操作示範

請嘗試在示範中使用全螢幕彈出式視窗，並查看原始碼。請務必勾選「fullscreen」核取方塊和「Fullscreen pop」按鈕，如果可以，請在裝置中連接多個畫面的示範影片。

特別銘謝

本文由 Brad Triebwasser、Hakan Isbiliroglu、Mike Wasserman 和 Rachel Andrew 審查。