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. Im Hauptfenster der App wird die Methode window.open() aufgerufen, für die eine Nutzergeste erforderlich ist, z. B. das Klicken auf die Schaltfläche Pop-up-Fenster öffnen.
  2. Im Pop-up-Fenster wird die Methode Element.requestFullscreen() aufgerufen, für die ebenfalls eine Nutzergeste wie das Klicken auf die Schaltfläche Vollbildmodus aktivieren erforderlich ist.

Es gibt jetzt einen neuen Ursprungstest, der von Chrome 119 (stabiles Datum: 31. Oktober 2023) bis Chrome 122 (stabiles Datum: 31. Oktober 2023) ausgeführt wird. Damit können Pop-up-Fenster mit nur einem Schritt im Vollbildmodus geöffnet werden. Klicken Sie auf der Landingpage des Testzeitraums für die Funktion Pop-ups als Vollbildfenster öffnen auf Registrieren, um sich zu registrieren. Neben dem Test der Quelle können Sie auch lokal testen, indem Sie das Flag chrome://flags/#fullscreen-popup-windows auf Aktiviert setzen.

Vollbild-Pop-up-Fenster auf dem aktuellen Bildschirm öffnen

Diese neue Funktion ist nur mit der Berechtigung window-management verfügbar. Sobald der Nutzer die Berechtigung erteilt hat, können Sie ein Pop-up-Fenster im Vollbildmodus öffnen, wie im folgenden Beispiel.

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

In der letzten Zeile des Codebeispiels ist der erste Parameter die url, die im Pop-up-Fenster geöffnet werden soll. Der zweite Parameter ist target mit dem speziellen Wert _blank. Der dritte Parameter ist für windowFeatures, einen kommagetrennten 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.

Vollbild-Pop-up-Fenster auf anderen Bildschirmen öffnen

Diese Funktion kommt in Kombination mit der Window Management API besonders gut zur Geltung. Mit dieser API können Sie Informationen zu allen Bildschirmen abrufen, 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 finden und dann seine Werte für availLeft, availTop, availWidth und availHeight an die entsprechenden Werte left, top, width und height des windowFeatures-Strings ü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

In der Demo können Sie sich Pop-up-Fenster im Vollbildmodus ansehen und den Quellcode ansehen. Klicken Sie das Kästchen Vollbild und die Schaltfläche Vollbild-Pop-up an. Wenn Sie die Möglichkeit haben, testen Sie die Demo mit mehreren Bildschirmen, die an Ihr Gerät angeschlossen sind.

Danksagungen

Dieser Artikel wurde von Brad Triebwasser, Hakan Isbiliroglu, Mike Wasserman und Rachel Andrew geprüft.