Window Management API

Historisch gesehen haben wir Window.open() verwendet, um Browserfenster in Bezug auf die aktuelle Anwendung zu verwalten – neue Fenster zu öffnen, vorhandene Fenster zu ändern und zu schließen usw. Zum Beispiel, um 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 aus der Window.screen Eigenschaft abrufen, wie beispielsweise, wie viel Bildschirmfläche zur Platzierung von Fenstern verfügbar ist.

Jedoch sind die oben genannten Funktionen begrenzt. Window.screen liefert nur Daten über den primären Bildschirm und nicht über sekundäre Anzeigen, die einem Gerät zur Verfügung stehen. Um ein Fenster zu einem sekundären Bildschirm zu verschieben, könnte man Window.moveTo() verwenden, müsste jedoch raten, welche Koordinaten basierend auf der relativen Platzierung zum primären Bildschirm zu verwenden sind.

Die Window Management API bietet eine robustere und flexiblere Fensterverwaltung. Sie erlaubt das Abfragen, ob Ihr Display mit mehreren Bildschirmen erweitert ist und liefert Informationen zu jedem Bildschirm einzeln: Fenster können dann wie gewünscht auf jedem Bildschirm platziert werden. Sie bietet auch Ereignishandler, um auf Änderungen der verfügbaren Bildschirme zu reagieren, neue Vollbildfunktionen, um auszuwählen, welcher Bildschirm im Vollbildmodus angezeigt werden soll (falls überhaupt), und Berechtigungsfunktionen zur Kontrolle des Zugriffs auf die API.

Für Einzelheiten zur Nutzung siehe Verwendung der Window Management API.

Die Window Management API ist nützlich in Fällen wie:

• Grafikeditoren und Audioprozessoren mit mehreren Fenstern, die Bearbeitungswerkzeuge und -panels über verschiedene Bildschirme hinweg anordnen möchten.
• Virtuelle Handelsarbeitsplätze, die Markttrends in mehreren Fenstern anzeigen und bestimmte interessante Fenster im Vollbildmodus darstellen möchten.
• Präsentationsanwendungen, die Notizen auf dem internen Primärbildschirm 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 Window Management API zu steuern. Insbesondere:

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

Entwickler können einer <iframe> explizit die Berechtigung zur Nutzung der Window Management API über das allow Attribut erteilen:

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

ScreenDetails Secure context

Repräsentiert die Details aller dem Gerät des Nutzers verfügbaren Bildschirme.

ScreenDetailed Secure context

Repräsentiert detaillierte Informationen über einen spezifischen Bildschirm des Geräts des Nutzers.

Das Screen change Ereignis Secure context

Wird ausgelöst, wenn sich ein spezifischer Bildschirm in irgendeiner Weise ändert – beispielsweise verfügbare Breite oder Höhe, oder Ausrichtung.

Screen.isExtended Secure context

Eine boolesche Eigenschaft, die true zurückgibt, wenn das Gerät des Nutzers über mehrere Bildschirme verfügt, und false, wenn nicht.

Element.requestFullscreen(), die screen Option

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

Window.getScreenDetails() Secure context

Gibt ein Promise zurück, das mit einem ScreenDetails Instanzobjekt erfüllt wird.

Vollständige Beispiele finden Sie hier:

• Grundlegende Umgebung mit mehreren Fenstern (siehe den Quellcode).
• Plattformspiel mit mehreren Fenstern (siehe den Quellcode).
• Von Elmer inspirierte Handelsarbeitsplatz-Demo (siehe den Quellcode).
• Demo zur Fensterpositionierung (siehe den Quellcode).