Nuova prova dell'origine per le finestre popup a schermo intero

Thomas Steiner

Immagina di voler aprire una finestra popup in modalità a schermo intero. Fino a questo momento, l'apertura di una finestra popup a schermo intero era composta da due passaggi:

  1. Dalla finestra principale dell'app, chiama il metodo window.open() che richiede un gesto dell'utente, ad esempio il clic su un pulsante Apri finestra popup.
  2. Dalla finestra popup, chiamando il metodo Element.requestFullscreen(), che richiede anch'esso un gesto dell'utente, ad esempio il clic su un pulsante Avvia modalità a schermo intero.

Ora è disponibile una nuova prova dell'origine da Chrome 119 (data di rilascio stabile): 31 ottobre 2023 a Chrome 122 (data di rilascio stabile): 31 ottobre 2023 per l'apertura di finestre popup in modalità schermo intero con un solo passaggio. Fai clic su Registrati nella pagina di destinazione della prova dell'origine Apri popup come finestre a schermo intero per registrarti. Oltre alla prova dell'origine, puoi anche eseguire test locali impostando il flag chrome://flags/#fullscreen-popup-windows su Attivato.

Apertura di finestre popup a schermo intero nella schermata corrente

Questa nuova funzionalità è soggetta all'autorizzazione window-management. Una volta che l'utente ha concesso l'autorizzazione, puoi aprire una finestra popup a schermo intero come nell'esempio seguente.

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

Nell'ultima riga del codice di esempio, il primo parametro è il url da aprire nella finestra popup. Il secondo parametro è target, con il valore speciale _blank. Il terzo parametro è per windowFeatures, una stringa separata da virgole con il valore popup per l'apertura di una finestra popup e il nuovo valore fullscreen per l'apertura della finestra popup in modalità a schermo intero. Funziona con un solo gesto dell'utente, pertanto può essere attivato con un solo clic su un pulsante.

Apertura di finestre popup a schermo intero su altre schermate

Questa funzionalità è particolarmente efficace se combinata con l'API Window Management, che consente di ottenere informazioni su tutte le schermate collegate dall'utente al computer. Ad esempio, per aprire una finestra popup a schermo intero su un'altra schermata rispetto a quella corrente dell'utente, devi prima trovare l'altra schermata e poi passare i relativi valori availLeft, availTop, availWidth e availHeight ai valori left, top, width e height corrispondenti della stringa 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`);
});

Demo

Prova le finestre popup a schermo intero nella demo e visualizza il codice sorgente. Assicurati di selezionare la casella di controllo schermo intero e il pulsante Popup a schermo intero e, se ne hai la possibilità, prova la demo con più schermi collegati al tuo dispositivo.

Ringraziamenti

Questo articolo è stato esaminato da Brad Triebwasser, Hakan Isbiliroglu, Mike Wasserman e Rachel Andrew.