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.

Mit Origin-Tests können Sie neue Funktionen testen und der Community für Webstandards Feedback zu deren Benutzerfreundlichkeit, Praktikabilität und Effektivität geben. Weitere Informationen finden Sie in der 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 ServerLos servidores son ordenadores centrales y potentes dentro del campo de la tecnología de la información que procesan y proporcionan software y archivos en una red. Desde el punto de vista de un cliente, varios ordenadores en una red pueden ponerse en contacto con el servidor central para conseguir la información solicitada. En la arquitectura cliente-servidor, el servidor puede ser un software que proporciona un servicio y se ejecuta en Plus, también puede agregar el token usando un Origin-Trial Encabezado HTTPEl HTTP (Hyper Text Transfer Protocol) es un protocolo que se usa para transmitir datos en redes. HTTP es un estándar técnico generalmente aceptado que establece cómo un cliente web se comunica con un servidor para que los datos solicitados por el cliente puedan ser cargados y mostrados. Información general Junto con el URL y el HTML, HTTP es uno de los conceptos más importantes de Internet (www). Fue desarrollado Plus. 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 PersonenLas personas son personalidades imaginarias que representan a un determinado grupo objetivo. En el marketing online, las personas ayudan a entender mejor a los usuarios de un portal web o a los clientes de una tienda online. Concepto de personas Para que las personas puedan ejercer su efecto positivo, deben ser lo más detalladas viable. Esto conlleva un término exhaustiva de los grupos destinatarios para conseguir datos empíricos. La próxima Plus 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

Bevor ich die Multiscreen-Fensterplatzierungs-API verwenden kann, muss ich den Benutzer um Erlaubnis bitten. Das neue Fensterplatzierung Die Genehmigung kann mit der konsultiert werden
Berechtigungs-API mögen:

Lassen granted = falsch;
try {
const { Zustand } = erwarten Navigator.permissions.AbfrageConcepto de Query¿Qué es una Query?Una query, en inglés, es una definición que significa pregunta. Trasladando este concepto al marketing digital y a internet, se traduce como el concepto que un usuario escribe en un buscador, véase Google, cuando desea realizar una búsqueda usando keywords o palabras clave. Es la serie de términos reales que se utilizan al momento de ir en busca de información en estos portales.Cuando un consumidor Plus({ Süßkartoffel: "window-placement" });
granted = Zustand === "granted";
} catch {
}

Das BrowserUn navegador (además: browser) es una herramienta informática que te permite ver documentos y datos y navegar por la red. Los navegadores pueden mostrar distintos tipos de recursos de información; principalmente documentos HTML, a pesar de todo, además son posibles otros tipos de archivos y contenido multimedia, como PDF, JPEG, MPEG, GIF o el lenguaje de meta marcado. A través el uso de complementos especiales y la configuración respectivo, los Plus
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 VeranstaltungConcepto de Evento¿Qué es un Evento?Un Evento es una actividad de carácter social que suele tener cierta proyección a nivel público y, de esta manera, suscita el interés de un determinado sector relacionado con la temática o con la razón por el que se celebra. Es un tipo de acto que suele tener mucha repercusión a nivel empresarial.Podemos hallar distintos tipos de eventos, desde los deportivos hasta los empresariales, pasando Plus

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 Eigenschaft, mit der Sie bestimmen können, auf welchem Bildschirm die Vollbildansicht gestartet werden soll. Wenn Sie beispielsweise möchten, dass der Hauptbildschirm im Vollbildmodus angezeigt wird:

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 BrowserConcepto de Navegadores¿Qué son los Navegadores?Los Navegadores son herramientas informáticas que utilizamos para, normalmente, navegar por Internet y visitar cualquier página web, al mismo tiempo de para hacer otras tareas como ver documentos, observar vídeos o reproducir contenido multimedia de cualquier tipo. Son un tipo de software sencillamente usual y bastante utilizado hoy en día.Insistimos en que es algo que se utiliza con mucha frecuencia, puesto que moverse por Internet Plus 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 TweetUn tweet es un mensaje corto que puede ser enviado por medio de del servicio de microblogging Twitter. ¿Qué es un tweet? Un tweet es un mensaje de estado en Twitter que puede tener hasta 280 caracteres. Los tweets solían limitarse a 140 caracteres, pero esta cantidad se incrementó a 280 en septiembre de 2017. Debido al espacio limitado para el texto, las URLs para uso en tweets son normalmente Plus zu @Cromodev mit dem #WindowPlacement HashtagConcepto de Hashtag¿Qué es un Hashtag?Un Hashtag es una almohadilla (#), o más bien, una palabra que se adjunta a esta para crear una etiqueta en determinadas redes sociales. Utilizada en un comienzo por Twitter, poco a poco se ha ido extendiendo por demás rincones de la red de redes, hasta el punto de ser uno de los componentes esenciales al momento de transmitir información, agrupar contenidos o catalogar tendencias.Facebook, Plus 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.