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 comprenait deux étapes:

  1. Depuis la fenêtre principale de l'application, appeler 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, appeler la méthode Element.requestFullscreen(), qui nécessite également un geste de l'utilisateur, comme un clic sur un bouton Passer en mode plein écran

Une nouvelle phase d'évaluation est désormais disponible depuis Chrome 119 (date stable) : Du 31 octobre 2023 au Chrome 122 (date stable) : 31 octobre 2023 pour ouvrir les fenêtres pop-up en mode plein écran en une seule étape. Sur la page de destination de la phase d'évaluation, cliquez sur Register (S'inscrire) sur la page de destination de la phase d'évaluation Ouvrir les fenêtres pop-up en plein écran pour vous inscrire. En plus de la phase d'évaluation, vous pouvez également effectuer des tests en local en définissant l'option chrome://flags/#fullscreen-popup-windows sur Activé.

Ouverture des 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 le url à ouvrir dans la fenêtre pop-up. Le deuxième paramètre est target, avec la valeur spéciale de _blank. Le troisième paramètre correspond à 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 ne fonctionne qu'avec un seul geste de l'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é se distingue par l'API de gestion des fenêtres 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 l'écran actuel 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émonstration

Essayez des fenêtres pop-up en plein écran dans la démonstration et affichez le code source. N'oubliez pas de cocher la case plein écran et le bouton Fenêtre pop-up en plein écran. Si vous le pouvez, lancez la démonstration avec plusieurs écrans connectés à votre appareil.

Remerciements

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