Verwalten Sie mehrere Anzeigen mit der Multi-Screen Window Location API

Informieren Sie sich über die angeschlossenen Anzeigen und die Position der Fenster in Bezug auf diese Anzeigen.

14. September 2020
Aktualisiert 14. September 2020

Mit der Multi-Screen Window Location API können Sie die mit Ihrem Computer verbundenen Anzeigen auflisten und Fenster auf bestimmten Anzeigen platzieren.

Vorgeschlagene Anwendungsfälle

Beispiele für Websites, die diese API verwenden können, sind:

• Grafikeditoren mit mehreren Fenstern im
  Gimp Sie können verschiedene Bearbeitungswerkzeuge in genau platzierten Fenstern platzieren.
• Virtuelle Trading Desks können Markttrends in mehreren Fenstern anzeigen, von denen jedes im Vollbildmodus angezeigt werden kann.
• Diashow-Anwendungen können Sprechernotizen auf dem internen Hauptbildschirm und die Präsentation auf einem externen Projektor anzeigen.

Tatsächlicher Zustand

So verwenden Sie die Multi-Screen Window Location API

Aktivierung über chrome: // flags

Aktivieren Sie die Option zum lokalen Experimentieren mit der Multiscreen-Fensterplatzierungs-API ohne Quelltest-Token #enable-experimentelle-Web-Plattform-Funktionen Flagge an chrome://flags.

Aktivieren Sie die Unterstützung während der Herkunftsnachweisphase

Ab Chrome 86 ist die Multi-Screen Window Location API als Ursprungsnachweis in Chrome verfügbar. Der Ursprungsnachweis wird voraussichtlich auf Chrome 88 (24. Februar 2021) abgeschlossen sein.

Las pruebas de Origin le permiten probar nuevas funciones y brindar comentarios sobre su usabilidad, practicidad y efectividad a la comunidad de estándares Netz. Para obtener más información, consulte el Origin-Testhandbuch für Webentwickler. Um sich für diesen oder einen anderen Herkunftsnachweis anzumelden, besuchen Sie die Registrierungsseite.

Registrieren Sie sich für den Herkunftsnachweis

1. Fordern Sie einen Token an von Ihrer Herkunft.
2. Fügen Sie das Token Ihren Seiten hinzu. Es gibt zwei Möglichkeiten, dies zu tun:
   • Füge hinzu ein Ursprungsversuch Tag zum Header jeder Seite. Dies könnte beispielsweise folgendermaßen aussehen:
     
   • Si puede configurar su Server, también puede agregar el token usando un Origin-Trial Encabezado HTTP. El encabezado de respuesta resultante debería verse así:
     Origin-Trial: TOKEN_GOES_HERE

Das Problem

Der bewährte Ansatz zur Steuerung von Fenstern,
Window.open (), leider keine zusätzlichen Bildschirme bekannt. Während einige Aspekte dieser API ein bisschen archaisch erscheinen, wie seine
windowFeatures
DOMString Parameter hat uns jedoch über die Jahre gute Dienste geleistet. Ein Fenster angeben
Positionkönnen Sie die Koordinaten als übergeben links y oben (oder screenX y screenY jeweils) und übergeben Sie die gewünschte
Größe Was
Breite y Höhe (oder innere Breite y innerHeight beziehungsweise). Um beispielsweise ein 400 × 300-Fenster mit 50 Pixel von links und 50 Pixel von oben zu öffnen, können Sie folgenden Code verwenden:

const auftauchen = Fenster.open(
"https://example.com/",
"My Popup",
"left=50,top=50,width=400,height=300"
);

Informationen zum aktuellen Bildschirm erhalten Sie unter
Fensterscheibe Eigenschaft, die a zurückgibt Bildschirm Objekt. Dies ist die Ausgabe auf meinem MacBook Air 13 ":

Fenster.Bildschirm;

Como la mayoría de las Personen que trabajan en tecnología, he tenido que adaptarme a la nueva realidad laboral y montar mi propia oficina en casa. El mío se ve como en la foto de abajo (si está interesado, puede leer el
Alle Details zu meinem Setup). Das iPad neben meinem MacBook Air ist über mit dem Laptop verbunden
BeiwagenWenn ich es brauche, kann ich das iPad schnell in einen zweiten Bildschirm verwandeln.

Wenn ich den größeren Bildschirm nutzen möchte, kann ich das Popup aus dem obigen Codebeispiel auf dem zweiten Bildschirm platzieren. So mach ich es:

auftauchen.moveTo(2500, 50);

Dies ist eine grobe Annahme, da die Abmessungen des zweiten Bildschirms nicht bekannt sind. Die Informationen von Fensterscheibe Es deckt nur den eingebauten Bildschirm ab, nicht jedoch den iPad-Bildschirm. Die berichteten Breite des eingebauten Bildschirms war 1680 Pixel, also bewegen sich zu
2500 Pixel könnte arbeiten, um das Fenster auf das iPad zu ändern, als mich Ich weiß zufällig, dass es sich rechts von meinem MacBook Air befindet. Wie kann ich das im allgemeinen Fall tun? Es stellt sich heraus, dass es einen besseren Weg gibt als zu raten. So ist es die Multiscreen-Fensterplatzierungs-API.

Funktionserkennung

Verwenden Sie Folgendes, um zu überprüfen, ob die Multiscreen-Fensterplatzierungs-API unterstützt wird:

wenn ("getScreens" im Fenster) {
}

das Fensterplatzierung erlauben

Antes de poder utilizar la API de ubicación de ventanas multipantalla, debo pedir permiso al Nutzername para hacerlo. El nuevo Fensterplatzierung Die Genehmigung kann mit der konsultiert werden
Berechtigungs-API mögen:

Lassen granted = falsch;
try {
const { Zustand } = erwarten Navigator.permissions.Abfrage({ Süßkartoffel: "window-placement" });
granted = Zustand === "granted";
} catch {
}

Das Browser
kann
Wählen Sie diese Option, um die Berechtigungsanforderung beim ersten Versuch, eine der neuen API-Methoden zu verwenden, dynamisch anzuzeigen. Lesen Sie weiter für weitere Informationen.

das isMultiScreen () Methode

Um die Multiscreen-Fensterplatzierungs-API zu verwenden, rufe ich zuerst die auf
Window.isMultiScreen () Methode. Gibt ein Versprechen zurück, das mit gelöst wurde wahr oder falschDies hängt davon ab, ob derzeit ein oder mehrere Displays an das Gerät angeschlossen sind. Für mein Setup geht es zurück wahr.

erwarten Fenster.isMultiScreen();

das getScreens () Methode

Jetzt, da ich weiß, dass das aktuelle Setup mehrere Bildschirme umfasst, kann ich mithilfe des zweiten Bildschirms weitere Informationen abrufen Window.getScreens (). Gibt ein Versprechen zurück, das in ein Array von aufgelöst wird Bildschirm Objekte. Auf meinem MacBook Air 13 mit angeschlossenem iPad wird ein Array von zwei zurückgegeben Bildschirm Objekte:

erwarten Fenster.getScreens();

Beachten Sie, wie der Wert von links für iPad beginnt bei 1680, das ist genau das Breite des eingebauten Bildschirms. Auf diese Weise kann ich genau bestimmen, wie die Bildschirme logisch angeordnet sind (nebeneinander, übereinander usw.). Es gibt jetzt auch Daten für jeden Bildschirm, die anzeigen, ob es sich um eine handelt intern eins und wenn es ein ist primär einer. Bitte beachten Sie, dass der eingebaute Bildschirm
nicht unbedingt der Hauptbildschirm. Sie haben beide auch gehenWenn die Browser-Sitzungen bestehen bleiben, kann die Verteilung der Fenster wiederhergestellt werden.

das Bildschirmwechsel Veranstaltung

Jetzt fehlt nur noch eine Möglichkeit zu erkennen, wann sich meine Anzeigeeinstellungen ändern. Eine neue Veranstaltung
BildschirmwechselGenau das tut es: Es wird jedes Mal ausgelöst, wenn sich die Konstellation auf dem Bildschirm ändert. (Beachten Sie, dass "Bildschirme" im Ereignisnamen Plural sind). Sie wird auch aktiviert, wenn sich die Auflösung eines der angeschlossenen Displays ändert oder wenn ein neues oder vorhandenes Display (physisch oder virtuell im Fall eines Beiwagens) angeschlossen oder getrennt wird.

Beachten Sie, dass Sie die Details des neuen Bildschirms asynchron durchsuchen müssen. Bildschirmwechsel Das Ereignis selbst liefert diese Daten nicht. Das kann Veränderung in der Zukunft. Im Moment können Sie die Bildschirmdetails finden, indem Sie anrufen window.getScreens () Wie nachfolgend dargestellt.

Fenster.addEventListener('screenschange', asynchron (Veranstaltung) => {
console.Log('I am there, but mostly useless', Veranstaltung);
const Einzelheiten = erwarten Fenster.getScreens();
});

Neue Vollbildoptionen

Bisher konnten Sie anfordern, dass Elemente im Vollbildmodus unter dem entsprechenden Namen angezeigt werden
requestFullScreen ()

Methode. Die Methode dauert a Optionen Parameter, den Sie übergeben können
Vollbildoptionen. Bis jetzt war sein einziges Eigentum
navigationUI. Die Multiscreen Window Location API fügt eine neue hinzu Bildschirm propiedad que le permite determinar en qué pantalla iniciar la vista de pantalla completa. Por ejemplo, si desea que la pantalla principal Sein de pantalla completa:

try {
const primaryScreen = (erwarten getScreens()).filter((Bildschirm) => Bildschirm.primär)[0];
erwarten Dokument.Körper.requestFullscreen({ Bildschirm: primaryScreen });
} catch (err) {
console.Error(err.Süßkartoffel, err.Botschaft);
}

Polyfill

Die Multiscreen-Fensterplatzierungs-API kann nicht ausgefüllt werden, aber Sie können ihre Form so anpassen, dass Sie ausschließlich mit der neuen API codieren können:

wenn (!("getScreens" im Fenster)) {
Fenster.getScreens = asynchron () => [Fenster.Bildschirm];
Fenster.isMultiScreen = asynchron () => falsch;
}

Die anderen Aspekte der API: die onscreenschange Veranstaltung und die Bildschirm Eigentum der
Vollbildoptionen: Das Browser no compatibles nunca dispararían o ignorarían silenciosamente, respectivamente.

Manifestation

Wenn Sie wie ich sind, überwachen Sie genau die Entwicklung verschiedener Kryptowährungen. (Ich mache das eigentlich nicht, aber für diesen Artikel denke ich.) Um die Kryptowährungen, die ich besitze, im Auge zu behalten, habe ich eine Webanwendung entwickelt, mit der ich die Märkte in meinem Leben beobachten kann. Situationen, wie von meinem bequemen Bett aus, in denen ich ein anständiges Einzelbildschirm-Setup habe.

Wenn es um Krypto geht, können die Märkte jederzeit unruhig werden. In diesem Fall kann ich schnell zu meinem Desktop wechseln, auf dem ich ein Multi-Display-Setup habe. Ich kann auf jedes Münzfenster klicken und schnell die vollständigen Details in einer Vollbildansicht auf dem gegenüberliegenden Bildschirm sehen. Unten ist ein aktuelles Foto von mir, das ich während des letzten gemacht habe YCY Blutbad. Es hat mich völlig überrascht und mich verlassen
mit meinen Händen auf meinem Gesicht.

Du kannst damit spielen Manifestation unten eingebettet, oder sehen Sie Ihre Quellcode im Scheitern.

Sicherheit und Berechtigungen

Das Chrome-Team hat die Multi-Screen Window Location API unter Verwendung der in definierten Grundprinzipien entworfen und implementiert Steuern Sie den Zugriff auf leistungsstarke Funktionen der Webplattform, einschließlich Benutzerkontrolle, Transparenz und Ergonomie. Die Multi-Screen Window Location API stellt neue Informationen zu den mit einem Gerät verbundenen Displays bereit und erhöht so den Fingerabdruck der Benutzer, insbesondere derjenigen, bei denen mehrere Displays ständig mit ihren Geräten verbunden sind. Um dieses Datenschutzproblem zu verringern, sind die Eigenschaften des belichteten Bildschirms auf das Minimum beschränkt, das für Anwendungsfälle mit häufigem Standort erforderlich ist. Für Websites ist eine Benutzerberechtigung erforderlich, um Informationen von mehreren Bildschirmen abzurufen und Fenster auf anderen Bildschirmen zu platzieren.

Nutzerkontrolle

Der Benutzer hat die volle Kontrolle über die Belichtung seiner Einstellungen. Sie können die Berechtigungsanforderung akzeptieren oder ablehnen und eine zuvor erteilte Berechtigung über die Informationsfunktion der Site im Browser widerrufen.

Transparenz

Die Tatsache, dass die Berechtigung zur Verwendung der Multi-Screen Window Location API erteilt wurde, wird in den Site-Informationen des Browsers angezeigt und kann auch über die Berechtigungs-API angezeigt werden.

Berechtigungspersistenz

Der Browser behält die Berechtigungsberechtigungen. Die Berechtigung kann über die Site-Informationen des Browsers widerrufen werden.

Feedback

Das Chrome-Team möchte mehr über Ihre Erfahrungen mit der Multi-Screen Window Location API erfahren.

Erzählen Sie uns etwas über das API-Design

Gibt es etwas in der API, das nicht wie erwartet funktioniert? Oder fehlen Ihnen Methoden oder Eigenschaften, die Sie zur Umsetzung Ihrer Idee benötigen? Haben Sie eine Frage oder einen Kommentar zum Sicherheitsmodell?

• Legen Sie ein Spezifikationsproblem in der entsprechenden Datei ab GitHub-Repositoryoder fügen Sie Ihre Gedanken zu einem bestehenden Problem hinzu.

Melden Sie ein Problem mit der Bereitstellung

Haben Sie einen Fehler bei der Chrome-Implementierung gefunden? Oder unterscheidet sich die Implementierung von der Spezifikation?

• Einen Fehler einreichen new.crbug.com. Stellen Sie sicher, dass Sie so viele Details wie möglich, einfache Anweisungen zum Reproduzieren und Eingeben enthalten Blinken> WindowDialog beim
  Komponenten (bearbeiten) Box. Fehler funktioniert hervorragend für das schnelle und einfache Teilen von Wiederholungen.

API-Unterstützung anzeigen

Denken Sie darüber nach, die Multiscreen-Fensterplatzierungs-API zu verwenden? Ihr öffentlicher Support hilft dem Chrome-Team bei der Priorisierung von Funktionen und zeigt anderen Browser-Anbietern, wie wichtig es ist, diese zu unterstützen.

• Teilen Sie mit, wie Sie es in der verwenden möchten WICG Speech Thread
• Sende ein Tweet zu @Cromodev mit dem #WindowPlacement Hashtag und lassen Sie uns wissen, wo und wie Sie es verwenden.
• Bitten Sie andere Browserhersteller, die API zu implementieren.

Nützliche Links

Ich möchte tiefer gehen

Vielen Dank

Die API-Spezifikation für die Position des Multiscreen-Fensters wurde von bearbeitet
Victor Costan y
Joshua Glocke. Die API wurde von implementiert
Mike wasserman. Dieser Artikel wurde von überprüft
Joe Medley,
François beauforty Kayce Basques. Vielen Dank an Laura Torrent Puig für die Fotos.