Window Management API

Historisch haben wir Window.open() verwendet, um Browserfenster zu verwalten, die zur aktuellen Anwendung gehören — zum Beispiel, um neue Fenster zu öffnen, bestehende Fenster zu verkleinern und zu schließen usw. Um beispielsweise ein 400×300 Fenster 50 Pixel vom linken und oberen Rand Ihres Bildschirms zu öffnen:

const myWindow = window.open(
  "https://example.com/",
  "myWindow",
  "left=50,top=50,width=400,height=300",
);

Sie können Informationen über Ihren Bildschirm von der Window.screen Eigenschaft abrufen, wie zum Beispiel, wie viel Bildschirmfläche Sie zur Verfügung haben, um Fenster darin zu platzieren.

Jedoch sind die obigen Funktionen limitiert. Window.screen gibt nur Daten über den primären Bildschirm zurück und nicht über sekundäre Bildschirme, die für ein Gerät verfügbar sind. Um ein Fenster auf einen sekundären Bildschirm zu verschieben, könnten Sie Window.moveTo() verwenden, aber Sie müssten raten, welche Koordinaten Sie basierend darauf verwenden, wo es in Ihrem Setup im Verhältnis zum primären Bildschirm platziert ist.

Die Fensterverwaltung-API bietet eine robustere, flexiblere Fenstermanagement. Es ermöglicht es Ihnen, abzufragen, ob Ihr Display mit mehreren Bildschirmen erweitert ist, und Informationen zu jedem Bildschirm separat zu erhalten: Fenster können dann nach Belieben auf jedem Bildschirm platziert werden. Sie bietet auch Ereignishandler, die es Ihnen ermöglichen, auf Änderungen der verfügbaren Bildschirme zu reagieren, neue Vollbildfunktionen, um auszuwählen, welchen Bildschirm Sie im Vollbildmodus anzeigen möchten (falls vorhanden), und Berechtigungsfunktionen, um den Zugriff auf die API zu kontrollieren.

Für Details zur Anwendung, siehe Verwendung der Fensterverwaltung-API.

Die Fensterverwaltung-API ist nützlich in Fällen wie:

• Mehrfenster-Grafikeditoren und Audiobearbeitungsprogramme, die Bearbeitungswerkzeuge und -fenster über verschiedene Bildschirme hinweg anordnen möchten.
• Virtuelle Handelsplätze, die Markttrends in mehreren Fenstern anzeigen wollen und bestimmte interessante Fenster im Vollbildmodus darstellen möchten.
• Präsentationsanwendungen, die Rednernotizen auf dem internen primären Bildschirm und die Präsentation auf einem externen Projektor anzeigen möchten.

Die window-management Permissions-Policy kann verwendet werden, um die Berechtigung zur Nutzung der Fensterverwaltung-API zu steuern. Insbesondere:

• Die Nutzung der Window.getScreenDetails() Methode. Wenn sie blockiert wird, lehnt ihr Promise mit einer NotAllowedError-Ausnahme ab.
• Die Abfrage der Window.screen.isExtended Eigenschaft. Wenn blockiert, wird sie immer false zurückgeben.

Entwickler können die Berechtigung für ein <iframe> explizit gewähren, um die Fensterverwaltung über das allow-Attribut zu nutzen:

<iframe src="3rd-party.example" allow="window-management"></iframe>

ScreenDetails Sicherer Kontext

Stellt die Details aller Bildschirme bereit, die dem Gerät des Benutzers zur Verfügung stehen.

ScreenDetailed Sicherer Kontext

Stellt detaillierte Informationen über einen bestimmten Bildschirm bereit, der dem Gerät des Benutzers zur Verfügung steht.

Das Screen change Ereignis Sicherer Kontext

Wird für einen bestimmten Bildschirm ausgelöst, wenn sich dieser in irgendeiner Weise ändert — beispielsweise in der verfügbaren Breite oder Höhe oder im Seitenverhältnis.

Screen.isExtended Sicherer Kontext

Eine boolesche Eigenschaft, die true zurückgibt, wenn das Gerät des Benutzers mehrere Bildschirme hat, und false, wenn nicht.

Element.requestFullscreen(), die screen Option

Gibt an, auf welchem Bildschirm Sie das Element im Vollbildmodus anzeigen möchten.

Window.getScreenDetails() Sicherer Kontext

Gibt eine Promise zurück, die mit einem ScreenDetails Objektinstanz erfüllt wird.

Vollständige Beispiele finden Sie hier:

• Grundlegende Mehrfenster-Lernumgebung (siehe den Quellcode).
• Mehrfenster-Plattformer-Spiel (siehe den Quellcode).
• Von Elmer inspiriertes Handelsdesk-Demo (siehe den Quellcode).
• Fensterplatzierungs-Demo (siehe den Quellcode).