Nouvelle phase d'évaluation pour les fenêtres pop-up en plein écran

Thomas Steiner

Imaginons que vous souhaitiez ouvrir une fenêtre pop-up en mode plein écran. Jusqu'à présent, l'ouverture d'une fenêtre pop-up en plein écran se composait de deux étapes:

  1. Dans la fenêtre principale de l'application, en appelant la méthode window.open() qui nécessite un geste de l'utilisateur, comme le clic sur un bouton Ouvrir une fenêtre pop-up.
  2. Dans la fenêtre pop-up, en appelant la méthode Element.requestFullscreen(), qui nécessite également un geste de l'utilisateur, comme le clic sur un bouton Passer en mode plein écran.

Une nouvelle phase d'évaluation de l'origine est désormais disponible à partir de Chrome 119 (date de sortie stable) : 31 octobre 2023, et jusqu'à Chrome 122 (date de sortie stable) : 31 octobre 2023 pour ouvrir des fenêtres pop-up en mode plein écran en une seule étape. Pour vous inscrire, cliquez sur S'inscrire sur la page de destination de l'essai de l'origine Ouvrir les pop-ups en tant que fenêtres plein écran. En plus du test d'origine, vous pouvez également effectuer des tests en local en définissant l'indicateur chrome://flags/#fullscreen-popup-windows sur Enabled (Activé).

Ouverture de fenêtres pop-up en plein écran sur l'écran actuel

Cette nouvelle fonctionnalité est contrôlée par l'autorisation window-management. Une fois que l'utilisateur a accordé l'autorisation, vous pouvez ouvrir une fenêtre pop-up en plein écran, comme dans l'exemple suivant.

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

Dans la dernière ligne de l'exemple de code, le premier paramètre est l'url à ouvrir dans la fenêtre pop-up. Le deuxième paramètre est target, avec la valeur spéciale _blank. Le troisième paramètre est destiné à windowFeatures, une chaîne séparée par des virgules avec la valeur popup pour ouvrir une fenêtre pop-up et la nouvelle valeur fullscreen pour ouvrir la fenêtre pop-up en mode plein écran. Cela fonctionne avec un seul geste utilisateur et peut donc être activé en un seul clic sur un bouton.

Ouverture de fenêtres pop-up en plein écran sur d'autres écrans

Cette fonctionnalité est particulièrement utile avec l'API Window Management, qui vous permet d'obtenir des informations sur tous les écrans que l'utilisateur a connectés à son ordinateur. Par exemple, pour ouvrir une fenêtre pop-up en plein écran sur un autre écran que celui de l'utilisateur, vous devez d'abord trouver l'autre écran, puis transmettre ses valeurs availLeft, availTop, availWidth et availHeight aux valeurs left, top, width et height correspondantes de la chaîne 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`);
});

Démo

Essayez les fenêtres pop-up en plein écran dans la démonstration et consultez le code source. Veillez à cocher la case Plein écran et le bouton Pop-up plein écran. Si possible, testez la démonstration avec plusieurs écrans connectés à votre appareil.

Remerciements

Cet article a été relu par Brad Triebwasser, Hakan Isbiliroglu, Mike Wasserman et Rachel Andrew.