New origin trial for fullscreen popup windows

Thomas Steiner

Imagine you want to open a popup window in fullscreen mode. Until now, opening a fullscreen popup window consisted of two steps:

  1. From the main app window, calling the window.open() method that requires a user gesture like the click on an Open popup window button.
  2. From the popup window, calling the Element.requestFullscreen() method, which likewise requires a user gesture like the click on an Enter fullscreen mode button.

There's now a new origin trial available running from Chrome 119 (stable date): October 31, 2023 to Chrome 122 (stable date): October 31, 2023 for opening popup windows in fullscreen mode with just one step. Click Register on the Open popups as fullscreen windows origin trial landing page to sign up. Apart from the origin trial, you can also test locally by setting the chrome://flags/#fullscreen-popup-windows flag to Enabled.

Opening fullscreen popup windows on the current screen

This new feature is gated behind the window-management permission. Once the user has granted the permission, you can open a fullscreen popup window as in the following example.

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');
});

In the last line of the code sample, the first parameter is the url to open in the popup window. The second parameter is the target, with the special value of _blank. The third parameter is for the windowFeatures, a comma-separated string with the value popup for opening a popup window and the new value fullscreen for opening the popup window in fullscreen mode. This works with just one user gesture, therefore can be activated with a single click on a button.

Opening fullscreen popup windows on other screens

This feature really shines in combination with the Window Management API which lets you obtain information about all the screens the user has connected to their computer. For example, to open a fullscreen popup window on another screen than the user's current screen, you need to first find the other screen and then pass its availLeft, availTop, availWidth, and availHeight values to the corresponding left, top, width, and height values of the windowFeatures string.


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`);
});

Demo

Try fullscreen popup windows in the demo and view the source code. Be sure to check the fullscreen checkbox and the Fullscreen popup button, and, if you have the opportunity, play with the demo with multiple screens attached to your device.

Acknowledgements

This article was reviewed by Brad Triebwasser, Hakan Isbiliroglu, Mike Wasserman, and Rachel Andrew.