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

Thomas Steiner

ポップアップ ウィンドウを全画面モードで開こうとしているとします。これまで、全画面表示のポップアップ ウィンドウを開くには、次の 2 つのステップがありました。

  1. メインアプリ ウィンドウから、[ポップアップ ウィンドウを開く] ボタンのクリックなどのユーザー操作を必要とする window.open() メソッドを呼び出す。
  2. ポップアップ ウィンドウから Element.requestFullscreen() メソッドを呼び出すには、同様に [全画面表示モードにする] ボタンのクリックなどのユーザー操作が必要です。

Chrome 119（安定版）から新しいオリジン トライアルをご利用いただけるようになりました。2023 年 10 月 31 日～ Chrome 122 で、2023 年 10 月 31 日に全画面モードでポップアップ ウィンドウを開くことができます。[ポップアップを全画面ウィンドウとして開く] オリジン トライアルのランディング ページで [登録] をクリックして登録します。オリジン トライアルとは別に、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 です。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 氏によるレビューです。