Nueva prueba de origen para ventanas emergentes de pantalla completa

Thomas Steiner

Imagina que quieres abrir una ventana emergente en modo de pantalla completa. Hasta ahora, abrir una ventana emergente en pantalla completa consistía en dos pasos:

  1. Desde la ventana principal de la app, llama al método window.open() que requiere un gesto del usuario, como hacer clic en un botón Open popup window.
  2. Desde la ventana emergente, llama al método Element.requestFullscreen(), que también requiere un gesto del usuario, como hacer clic en un botón Enter fullscreen mode.

Ahora hay una nueva prueba de origen disponible que se ejecuta desde Chrome 119 (fecha estable): 31 de octubre de 2023 hasta Chrome 122 (fecha estable): 31 de octubre de 2023 para abrir ventanas emergentes en modo de pantalla completa con un solo paso. Haz clic en Registrarse en la página de destino de la prueba de origen Open popups as fullscreen windows para registrarte. Además de la prueba de origen, también puedes realizar pruebas de forma local configurando la marca chrome://flags/#fullscreen-popup-windows como Habilitada.

Abrir ventanas emergentes de pantalla completa en la pantalla actual

Esta nueva función está restringida por el permiso window-management. Una vez que el usuario otorgue el permiso, puedes abrir una ventana emergente de pantalla completa como en el siguiente ejemplo.

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

En la última línea de la muestra de código, el primer parámetro es el url que se abrirá en la ventana emergente. El segundo parámetro es target, con el valor especial de _blank. El tercer parámetro es para windowFeatures, una cadena separada por comas con el valor popup para abrir una ventana emergente y el valor nuevo fullscreen para abrir la ventana emergente en modo de pantalla completa. Esto funciona con un solo gesto del usuario, por lo que se puede activar con un solo clic en un botón.

Cómo abrir ventanas emergentes de pantalla completa en otras pantallas

Esta función se destaca en combinación con la API de Window Management, que te permite obtener información sobre todas las pantallas que el usuario conectó a su computadora. Por ejemplo, para abrir una ventana emergente de pantalla completa en una pantalla distinta de la actual del usuario, primero debes encontrar la otra pantalla y, luego, pasar sus valores availLeft, availTop, availWidth y availHeight a los valores left, top, width y height correspondientes de la cadena windowFeatures.


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

Demostración

Prueba las ventanas emergentes de pantalla completa en la demostración y consulta el código fuente. Asegúrate de marcar la casilla de verificación Pantalla completa y el botón Ventana emergente de pantalla completa y, si tienes la oportunidad, prueba la demostración con varias pantallas conectadas a tu dispositivo.

Agradecimientos

Brad Triebwasser, Hakan Isbiliroglu, Mike Wasserman y Rachel Andrew revisaron este artículo.