Window Management API

Historisch haben wir Window.open() verwendet, um Browserfenster in Bezug auf die aktuelle Anwendung zu verwalten – neue Fenster zu öffnen, bestehende Fenster zu vergrößern 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 über die Eigenschaft Window.screen abrufen, zum Beispiel, wie viel Bildschirmplatz Sie zur Verfügung haben, um Fenster zu platzieren.

Die obigen Funktionen sind jedoch begrenzt. Window.screen gibt nur Daten über den primären Bildschirm zurück und nicht über sekundäre Bildschirme, die einem Gerät zur Verfügung stehen. Um ein Fenster auf einen sekundären Bildschirm zu verschieben, könnten Sie Window.moveTo() verwenden, aber Sie müssten raten, welche Koordinaten verwendet werden sollen, basierend darauf, wo es in Ihrem Setup relativ zum primären Bildschirm platziert ist.

Die Fensterverwaltung API bietet eine robustere, flexiblere Fensterverwaltung. Sie ermöglicht es Ihnen, zu überprüfen, ob Ihr Display mit mehreren Bildschirmen erweitert ist, und Informationen über jeden Bildschirm separat zu erhalten: Fenster können dann nach Wunsch auf jedem Bildschirm platziert werden. Sie bietet auch Ereignishandler, um auf Änderungen der verfügbaren Bildschirme zu reagieren, neue Vollbildfunktionen, um auszuwählen, welchen Bildschirm Sie (falls vorhanden) in den Vollbildmodus versetzen möchten und Berechtigungsfunktionen, um den Zugriff auf die API zu steuern.

Details zur Verwendung finden Sie unter Using the Window Management API.

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

• Multi-Window-Grafikeditoren und Audioprozessoren, die vielleicht Bearbeitungswerkzeuge und Panels auf verschiedene Bildschirme verteilen möchten.
• Virtuelle Handelsplätze, die Markttendenzen in mehreren Fenstern zeigen und bestimmte interessante Fenster im Vollbildmodus anzeigen möchten.
• Präsentationsanwendungen, die Referentennotizen auf dem internen Primärbildschirm und die Präsentation auf einem externen Projektor anzeigen möchten.

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

• Die Nutzung der Methode Window.getScreenDetails(). Wenn blockiert, wird deren Promise mit einem NotAllowedError-Ausnahme abgelehnt.
• Die Abfrage der Eigenschaft Window.screen.isExtended. Wenn blockiert, gibt sie immer false zurück.

Entwickler können einem <iframe> ausdrücklich die Berechtigung geben, die Fensterverwaltung zu nutzen, indem sie das allow-Attribut verwenden:

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

ScreenDetails Sicherer Kontext

Repräsentiert die Details aller der Geräte des Nutzers zur Verfügung stehenden Bildschirme.

ScreenDetailed Sicherer Kontext

Repräsentiert detaillierte Informationen über einen bestimmten Bildschirm, der dem Gerät des Nutzers zur Verfügung steht.

Das Screen-change-Ereignis Sicherer Kontext

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

Screen.isExtended Sicherer Kontext

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() Sicherer Kontext

Gibt ein Promise zurück, das mit einer ScreenDetails-Objektinstanz erfüllt wird.

Vollständige Beispiele finden Sie hier:

• Grundlegende Multi-Window-Lernumgebung (siehe den Quellcode).
• Multi-Window-Plattformspiel (siehe den Quellcode).
• Fensterplatzierungs-Demo (siehe den Quellcode).