全画面表示のポップアップ ウィンドウの新しいオリジン トライアル

Thomas Steiner

ポップアップ ウィンドウを全画面モードで開きたいとします。これまで、全画面ポップアップ ウィンドウを開くには、次の 2 つの手順が必要でした。

  1. メインアプリ ウィンドウから、ポップアップ ウィンドウを開くボタンのクリックなど、ユーザー操作を必要とする window.open() メソッドを呼び出す。
  2. ポップアップ ウィンドウから Element.requestFullscreen() メソッドを呼び出す。これも、フルスクリーン モードに移行ボタンのクリックなどのユーザー操作が必要です。

ポップアップ ウィンドウを 1 ステップで全画面モードで開くための新しいオリジン トライアルが、Chrome 119（安定版日: 2023 年 10 月 31 日）から Chrome 122（安定版日: 2023 年 10 月 31 日）で利用可能になりました。ポップアップを全画面ウィンドウとして開くオリジン トライアルのランディング ページで [登録] をクリックして登録します。オリジン トライアル以外にも、chrome://flags/#fullscreen-popup-windows フラグを [有効] に設定してローカルでテストすることもできます。

現在の画面で全画面ポップアップ ウィンドウを開く

この新機能は、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 です。2 つ目のパラメータは target で、特別な値 _blank です。3 つ目のパラメータは windowFeatures です。これは、ポップアップ ウィンドウを開くための値 popup と、ポップアップ ウィンドウを全画面モードで開くための新しい値 fullscreen を含む、カンマ区切りの文字列です。これは 1 つのユーザー操作で機能するため、ボタンを 1 回クリックするだけで有効にできます。

他の画面で全画面表示のポップアップ ウィンドウを開く

この機能は、ユーザーがパソコンに接続しているすべての画面に関する情報を取得できる 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 が確認しました。