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

Thomas Steiner

假設您想以全螢幕模式開啟彈出式視窗。在此之前，開啟全螢幕彈出式視窗需要兩個步驟：

  1. 從主要應用程式視窗呼叫需要使用者手勢的 window.open() 方法，例如點選「Open popup window」按鈕。
  2. 在彈出式視窗中呼叫 Element.requestFullscreen() 方法，這同樣需要使用者手勢，例如按一下「Enter full screen mode」按鈕。

現已推出新的來源試用功能，可在 Chrome 119 (穩定版日期) 以上版本中使用： 在以全螢幕視窗開啟彈出式視窗原始試用版到達網頁上，按一下「註冊」即可註冊。除了原始試驗外，您也可以將 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`);
});

示範

請試試示範中的全螢幕彈出式視窗，並查看原始碼。請務必勾選「全螢幕」核取方塊和「全螢幕彈出式視窗」按鈕，如果有需要，請在裝置上連接多個螢幕，並試玩這個示範。

特別銘謝

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