Neuer Ursprungstest für Vollbild-Pop-up-Fenster

Thomas Steiner

Angenommen, Sie möchten ein Pop-up-Fenster im Vollbildmodus öffnen. Bisher bestand das Öffnen eines Pop-up-Fensters im Vollbildmodus aus zwei Schritten:

  1. Rufen Sie im Hauptfenster der App die Methode window.open() auf, für die eine Nutzergeste wie das Klicken auf die Schaltfläche Popup-Fenster öffnen erforderlich ist.
  2. Rufen Sie im Pop-up-Fenster die Methode Element.requestFullscreen() auf. Dies erfordert ebenfalls eine Nutzergeste wie das Klicken auf die Schaltfläche Vollbildmodus starten.

Ab Chrome 119 (stabiles Datum) ist jetzt ein neuer Ursprungstest verfügbar: 31. Oktober 2023 bis Chrome 122 (stabiles Datum): Ab dem 31. Oktober 2023 können Pop-up-Fenster mit nur einem Schritt im Vollbildmodus geöffnet werden. Klicken Sie auf der Landingpage des Ursprungstests auf Pop-ups als Vollbildfenster öffnen auf Registrieren, um sich zu registrieren. Neben dem Ursprungstest können Sie auch lokal testen. Dazu setzen Sie das Flag chrome://flags/#fullscreen-popup-windows auf Aktiviert.

Pop-up-Fenster im Vollbildmodus werden auf dem aktuellen Bildschirm geöffnet

Diese neue Funktion unterliegt der Berechtigung window-management. Nachdem der Nutzer die Berechtigung erteilt hat, können Sie wie im folgenden Beispiel ein Pop-up-Fenster im Vollbildmodus öffnen.

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

Der erste Parameter in der letzten Zeile des Codebeispiels ist der url, der im Pop-up-Fenster geöffnet werden soll. Der zweite Parameter ist der target mit dem speziellen Wert _blank. Der dritte Parameter ist für windowFeatures, einen durch Kommas getrennten String mit dem Wert popup zum Öffnen eines Pop-up-Fensters und dem neuen Wert fullscreen zum Öffnen des Pop-up-Fensters im Vollbildmodus. Dies funktioniert mit nur einer Nutzergeste und kann daher mit einem einzigen Klick auf eine Schaltfläche aktiviert werden.

Pop-up-Fenster im Vollbildmodus auf anderen Bildschirmen öffnen

Diese Funktion kommt vor allem in Verbindung mit der Window Management API zum Einsatz, mit der Sie Informationen zu allen Bildschirmen abrufen können, die der Nutzer mit seinem Computer verbunden hat. Wenn Sie beispielsweise ein Pop-up-Fenster im Vollbildmodus auf einem anderen Bildschirm als dem aktuellen Bildschirm des Nutzers öffnen möchten, müssen Sie zuerst den anderen Bildschirm suchen und dann die Werte availLeft, availTop, availWidth und availHeight an die entsprechenden Werte für left, top, width und height des Strings windowFeatures übergeben.


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

Probieren Sie in der Demo Vollbild-Pop-up-Fenster aus und sehen Sie sich den Quellcode an. Klicken Sie unbedingt das Kästchen Vollbild und die Schaltfläche Vollbild-Pop-up an. Bei Gelegenheit können Sie die Demo mit mehreren an Ihr Gerät angeschlossenen Bildschirmen ausprobieren.

Danksagungen

Dieser Artikel wurde von Brad Triebwasser, Hakan Isbiliroglu, Mike Wasserman und Rachel Andrew verfasst.