New origin trial for fullscreen popup windows
Imagine you want to open a popup window in fullscreen mode. Until now, opening a fullscreen popup window consisted of two steps:
- From the main app window, calling the
window.open()
method that requires a user gesture like the click on an Open popup window button. - 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): February 20, 2024 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`);
});
It's not required to add popup
in the windowFeatures
strings here, as it's implicitly assumed when any of left
, top
, width
, or height
is defined.
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.
Related links
- Public explainer
- ChromeStatus entry
- Chromium bug
- TAG review
- Mozilla standards position
- WebKit standards position
Acknowledgements
This article was reviewed by Brad Triebwasser, Hakan Isbiliroglu, Mike Wasserman, and Rachel Andrew.