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

Thomas Steiner

Stellen Sie sich vor, Sie möchten ein Pop-up-Fenster im Vollbildmodus öffnen. Bisher waren zum Öffnen eines Vollbild-Pop-up-Fensters zwei Schritte erforderlich:

  1. Aus dem Hauptfenster der App wird die Methode window.open() aufgerufen, für die eine Nutzeraktion wie das Klicken auf die Schaltfläche Pop-up-Fenster öffnen erforderlich ist.
  2. Im Pop-up-Fenster wird die Methode Element.requestFullscreen() aufgerufen, für die ebenfalls eine Nutzeraktion wie das Klicken auf die Schaltfläche Vollbildmodus aufrufen erforderlich ist.

Es gibt jetzt einen neuen Ursprungstest, der ab Chrome 119 (stabiles Datum) läuft: 31. Oktober 2023 bis Chrome 122 (stabiles Datum): 31. Oktober 2023 zum Öffnen von Pop-up-Fenstern im Vollbildmodus in nur einem Schritt. Klicken Sie auf der Landingpage des Origin-Trials Pop-ups als Vollbildfenster öffnen auf Registrieren, um sich anzumelden. Abgesehen vom Ursprungstest können Sie auch lokal testen, indem Sie das Flag chrome://flags/#fullscreen-popup-windows auf Aktiviert setzen.

Pop-up-Fenster im Vollbildmodus auf dem aktuellen Bildschirm öffnen

Diese neue Funktion ist an die Berechtigung window-management gebunden. Sobald der Nutzer die Berechtigung erteilt hat, können Sie ein Vollbild-Pop-up-Fenster wie im folgenden Beispiel ö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');
});

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 Sonderwert _blank. Der dritte Parameter ist für die windowFeatures. Das ist ein durch Kommas getrennter String mit dem Wert popup zum Öffnen eines Pop‑up-Fensters und dem neuen Wert fullscreen zum Öffnen des Pop‑up-Fensters im Vollbildmodus. Das funktioniert mit nur einer Nutzeraktion und kann daher mit einem einzigen Klick auf eine Schaltfläche aktiviert werden.

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

Diese Funktion ist besonders nützlich in Kombination mit der Window Management API, mit der Sie Informationen zu allen Bildschirmen abrufen können, die der Nutzer mit seinem Computer verbunden hat. Wenn Sie beispielsweise ein Vollbild-Pop-up-Fenster auf einem anderen Bildschirm als dem aktuellen Bildschirm des Nutzers öffnen möchten, müssen Sie zuerst den anderen Bildschirm suchen und dann seine availLeft-, availTop-, availWidth- und availHeight-Werte an die entsprechenden left-, top-, width- und height-Werte 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

Demo ausprobieren und Quellcode ansehen Achten Sie darauf, dass das Kästchen Vollbild und die Schaltfläche Vollbild-Pop-up aktiviert sind. Wenn möglich, 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.