Informationen zu verbundenen Bildschirmen abrufen und Fenster relativ zu diesen Bildschirmen positionieren
Window Management API
Mit der Window Management API können Sie die mit Ihrem Computer verbundenen Displays auflisten und Fenster auf bestimmten Bildschirmen platzieren.
Empfohlene Anwendungsfälle
Beispiele für Websites, die diese API verwenden können:
- In Grafikeditoren mit mehreren Fenstern wie Gimp können verschiedene Bearbeitungstools in genau positionierten Fenstern platziert werden.
- Virtuelle Trading Desks können Markttrends in mehreren Fenstern anzeigen, die alle im Vollbildmodus geöffnet werden können.
- Mit einer Bildschirmpräsentations-App können Sie die Vortragsnotizen auf dem internen Hauptbildschirm und die Präsentation auf einem externen Projektor anzeigen.
Window Management API verwenden
Das Problem
Die bewährte Methode zur Steuerung von Fenstern, Window.open(), erkennt leider keine zusätzlichen Bildschirme. Einige Aspekte dieser API wirken etwas archaisch, z. B. der Parameter windowFeatures
DOMString. Sie hat uns jedoch über die Jahre gute Dienste geleistet. Um die Position eines Fensters anzugeben, können Sie die Koordinaten als left und top (bzw. screenX und screenY) und die gewünschte Größe als width und height (bzw. innerWidth und innerHeight) übergeben. Wenn Sie beispielsweise ein Fenster mit einer Größe von 400 × 300 Pixeln 50 Pixel links und 50 Pixel oben öffnen möchten, können Sie diesen Code verwenden:
const popup = window.open(
'https://example.com/',
'My Popup',
'left=50,top=50,width=400,height=300',
);
Informationen zum aktuellen Bildschirm finden Sie in der Property window.screen, die ein Screen-Objekt zurückgibt. Das ist die Ausgabe auf meinem MacBook Pro 13":
window.screen;
/* Output from my MacBook Pro 13″:
availHeight: 969
availLeft: 0
availTop: 25
availWidth: 1680
colorDepth: 30
height: 1050
isExtended: true
onchange: null
orientation: ScreenOrientation {angle: 0, type: "landscape-primary", onchange: null}
pixelDepth: 30
width: 1680
*/
Wie die meisten Menschen in der Technologiebranche musste ich mich an die neue Arbeitsrealität anpassen und mein eigenes Homeoffice einrichten. Meine sieht so aus wie auf dem Foto unten. Hier finden Sie alle Details zu meiner Einrichtung. Das iPad neben meinem MacBook ist über Sidecar mit dem Laptop verbunden. So kann ich das iPad bei Bedarf schnell in einen zweiten Bildschirm verwandeln.
Wenn ich den größeren Bildschirm nutzen möchte, kann ich das Pop-up aus dem Codebeispiel oben auf dem zweiten Bildschirm platzieren. Ich mache das so:
popup.moveTo(2500, 50);
Das ist eine grobe Schätzung, da die Abmessungen des zweiten Bildschirms nicht bekannt sind. Die Informationen von window.screen beziehen sich nur auf das integrierte Display, nicht auf das iPad-Display. Die gemeldete width des integrierten Bildschirms betrug 1680 Pixel. Wenn Sie also zu 2500 Pixeln wechseln, könnte das Fenster auf das iPad verschoben werden, da ich weiß, dass es sich rechts neben meinem MacBook befindet. Wie kann ich das im Allgemeinen tun? Es gibt aber eine bessere Lösung als das Raten. Dazu dient die Window Management API.
Funktionserkennung
So prüfen Sie, ob die Window Management API unterstützt wird:
if ('getScreenDetails' in window) {
// The Window Management API is supported.
}
Die Berechtigung window-management
Bevor ich die Window Management API verwenden kann, muss ich den Nutzer um Erlaubnis bitten. Die Berechtigung window-management kann so mit der Permissions API abgefragt werden:
let granted = false;
try {
const { state } = await navigator.permissions.query({ name: 'window-management' });
granted = state === 'granted';
} catch {
// Nothing.
}
Solange Browser mit dem alten und dem neuen Berechtigungsnamen verwendet werden, sollten Sie beim Anfordern der Berechtigung unbedingt defensiven Code verwenden, wie im Beispiel unten.
async function getWindowManagementPermissionState() {
let state;
// The new permission name.
try {
({ state } = await navigator.permissions.query({
name: "window-management",
}));
} catch (err) {
return `${err.name}: ${err.message}`;
}
return state;
}
document.querySelector("button").addEventListener("click", async () => {
const state = await getWindowManagementPermissionState();
document.querySelector("pre").textContent = state;
});
Der Browser kann die Berechtigungsanfrage beim ersten Versuch, eine der Methoden der neuen API zu verwenden, dynamisch anzeigen. Lesen Sie weiter, um zusätzliche Informationen zu erhalten!
Das window.screen.isExtended-Attribut
Um herauszufinden, ob mehr als ein Bildschirm mit meinem Gerät verbunden ist, rufe ich das Attribut window.screen.isExtended auf. Es wird true oder false zurückgegeben. In meiner Konfiguration wird true zurückgegeben.
window.screen.isExtended;
// Returns `true` or `false`.
Die Methode getScreenDetails()
Da ich jetzt weiß, dass die aktuelle Konfiguration ein Multi-Screen-System ist, kann ich mit Window.getScreenDetails() weitere Informationen zum zweiten Bildschirm abrufen. Wenn ich diese Funktion aufrufe, wird ein Berechtigungsaufforderung angezeigt, in der ich gefragt werde, ob die Website Fenster auf meinem Bildschirm öffnen und platzieren darf. Die Funktion gibt ein Versprechen zurück, das mit einem ScreenDetailed-Objekt aufgelöst wird. Auf meinem MacBook Pro 13 mit einem verbundenen iPad ist das ein screens-Feld mit zwei ScreenDetailed-Objekten:
await window.getScreenDetails();
/* Output from my MacBook Pro 13″ with the iPad attached:
{
currentScreen: ScreenDetailed {left: 0, top: 0, isPrimary: true, isInternal: true, devicePixelRatio: 2, …}
oncurrentscreenchange: null
onscreenschange: null
screens: [{
// The MacBook Pro
availHeight: 969
availLeft: 0
availTop: 25
availWidth: 1680
colorDepth: 30
devicePixelRatio: 2
height: 1050
isExtended: true
isInternal: true
isPrimary: true
label: "Built-in Retina Display"
left: 0
onchange: null
orientation: ScreenOrientation {angle: 0, type: "landscape-primary", onchange: null}
pixelDepth: 30
top: 0
width: 1680
},
{
// The iPad
availHeight: 999
availLeft: 1680
availTop: 25
availWidth: 1366
colorDepth: 24
devicePixelRatio: 2
height: 1024
isExtended: true
isInternal: false
isPrimary: false
label: "Sidecar Display (AirPlay)"
left: 1680
onchange: null
orientation: ScreenOrientation {angle: 0, type: "landscape-primary", onchange: null}
pixelDepth: 24
top: 0
width: 1366
}]
}
*/
Informationen zu den verbundenen Bildschirmen finden Sie im Array screens. Beachten Sie, dass der Wert von left für das iPad bei 1680 beginnt, was genau der width des integrierten Displays entspricht. So kann ich genau festlegen, wie die Bildschirme logisch angeordnet sind (nebeneinander, übereinander usw.). Außerdem gibt es jetzt Daten für jeden Bildschirm, die angeben, ob es sich um einen isInternal- oder einen isPrimary-Bildschirm handelt. Der integrierte Bildschirm ist nicht unbedingt der primäre Bildschirm.
Das Feld currentScreen ist ein Live-Objekt, das dem aktuellen window.screen entspricht. Das Objekt wird bei geräteübergreifenden Placements oder Geräteänderungen aktualisiert.
Das screenschange-Ereignis
Es fehlt nur noch eine Möglichkeit, zu erkennen, wenn sich meine Bildschirmkonfiguration ändert. Das neue Ereignis screenschange tut genau das: Es wird ausgelöst, wenn sich die Bildschirmkonstellation ändert. Beachten Sie, dass „Bildschirme“ im Ereignisnamen im Plural steht. Das Ereignis wird also ausgelöst, wenn ein neuer Bildschirm oder ein vorhandener Bildschirm (physisch oder virtuell im Fall von Sidecar) angeschlossen oder getrennt wird.
Die Details zum neuen Bildschirm müssen asynchron abgerufen werden, da das Ereignis screenschange diese Daten nicht selbst bereitstellt. Verwenden Sie das Live-Objekt aus einer im Cache gespeicherten Screens-Schnittstelle, um die Bildschirmdetails abzurufen.
const screenDetails = await window.getScreenDetails();
let cachedScreensLength = screenDetails.screens.length;
screenDetails.addEventListener('screenschange', (event) => {
if (screenDetails.screens.length !== cachedScreensLength) {
console.log(
`The screen count changed from ${cachedScreensLength} to ${screenDetails.screens.length}`,
);
cachedScreensLength = screenDetails.screens.length;
}
});
Das currentscreenchange-Ereignis
Wenn ich nur an Änderungen am aktuellen Bildschirm interessiert bin (d. h. am Wert des Liveobjekts currentScreen), kann ich das Ereignis currentscreenchange überwachen.
const screenDetails = await window.getScreenDetails();
screenDetails.addEventListener('currentscreenchange', async (event) => {
const details = screenDetails.currentScreen;
console.log('The current screen has changed.', event, details);
});
Das change-Ereignis
Wenn ich nur an Änderungen an einem bestimmten Bildschirm interessiert bin, kann ich das Ereignis change dieses Bildschirms abhören.
const firstScreen = (await window.getScreenDetails())[0];
firstScreen.addEventListener('change', async (event) => {
console.log('The first screen has changed.', event, firstScreen);
});
Neue Vollbildoptionen
Bisher konnten Sie über die Methode requestFullScreen() anfordern, dass Elemente im Vollbildmodus angezeigt werden. Die Methode nimmt einen options-Parameter entgegen, für den du FullscreenOptions übergeben kannst. Bisher war navigationUI die einzige Property.
Die Window Management API fügt eine neue Property screen hinzu, mit der Sie festlegen können, auf welchem Bildschirm die Vollbildansicht gestartet werden soll. So können Sie beispielsweise den Hauptbildschirm im Vollbildmodus anzeigen:
try {
const primaryScreen = (await getScreenDetails()).screens.filter((screen) => screen.isPrimary)[0];
await document.body.requestFullscreen({ screen: primaryScreen });
} catch (err) {
console.error(err.name, err.message);
}
Polyfill
Die Window Management API kann nicht gepolyfillt werden, aber Sie können ihre Form so anpassen, dass Sie ausschließlich für die neue API programmieren können:
if (!('getScreenDetails' in window)) {
// Returning a one-element array with the current screen,
// noting that there might be more.
window.getScreenDetails = async () => [window.screen];
// Set to `false`, noting that this might be a lie.
window.screen.isExtended = false;
}
Die anderen Aspekte der API, also die verschiedenen Bildschirmwechselereignisse und die screen-Eigenschaft der FullscreenOptions, werden von nicht unterstützten Browsern einfach nie ausgelöst oder stumm ignoriert.
Demo
Wenn es Ihnen wie mir geht, verfolgen Sie die Entwicklung der verschiedenen Kryptowährungen genau. (In Wirklichkeit tue ich das nicht, weil ich diesen Planeten liebe, aber für diesen Artikel nehmen wir an, dass ich es tue.) Um den Überblick über meine Kryptowährungen zu behalten, habe ich eine Webanwendung entwickelt, mit der ich die Märkte in allen Lebenssituationen beobachten kann, z. B. bequem von meinem Bett aus, wo ich eine gute Ein-Bildschirm-Einrichtung habe.
Da es sich um Kryptowährungen handelt, können die Märkte jederzeit hektisch werden. Sollte das passieren, kann ich schnell an meinen Schreibtisch gehen, an dem ich mehrere Bildschirme habe. Ich kann auf das Fenster einer beliebigen Währung klicken und die vollständigen Details schnell im Vollbildmodus auf dem gegenüberliegenden Bildschirm sehen. Unten sehen Sie ein aktuelles Foto von mir, das während des letzten YCY-Massakers aufgenommen wurde. Ich war völlig überrascht und hielt mir die Hände vors Gesicht.
Sie können die unten eingebettete Demo ausprobieren oder sich den Quellcode auf glitch ansehen.
Sicherheit und Berechtigungen
Das Chrome-Team hat die Window Management API anhand der in Controlling Access to Powerful Web Platform Features (Zugriff auf leistungsstarke Funktionen der Webplattform steuern) definierten Grundprinzipien entwickelt und implementiert, einschließlich Nutzersteuerung, Transparenz und Ergonomie. Die Window Management API stellt neue Informationen zu den Bildschirmen bereit, die mit einem Gerät verbunden sind. Dadurch wird die Fläche für den Fingerabdruck von Nutzern vergrößert, insbesondere bei Nutzern mit mehreren Bildschirmen, die ständig mit ihren Geräten verbunden sind. Um dieses Datenschutzrisiko zu minimieren, sind die freigegebenen Bildschirmeigenschaften auf das Minimum beschränkt, das für gängige Anwendungsfälle von Placements erforderlich ist. Websites benötigen die Nutzerberechtigung, um Informationen zu mehreren Bildschirmen abzurufen und Fenster auf anderen Bildschirmen zu platzieren. Während Chromium detaillierte Bildschirmlabels zurückgibt, können Browser weniger aussagekräftige (oder sogar leere) Labels zurückgeben.
Nutzersteuerung
Der Nutzer hat die volle Kontrolle darüber, wie seine Konfiguration präsentiert wird. Sie können die Aufforderung zur Einwilligung akzeptieren oder ablehnen und eine zuvor erteilte Einwilligung über die Funktion „Website-Informationen“ im Browser widerrufen.
Unternehmenssteuerung
Chrome Enterprise-Nutzer können verschiedene Aspekte der Window Management API steuern, wie im entsprechenden Abschnitt der Einstellungen für atomare Richtliniengruppen beschrieben.
Transparenz
Ob die Berechtigung zur Verwendung der Window Management API erteilt wurde, ist in den Websiteinformationen des Browsers zu sehen und kann auch über die Permissions API abgefragt werden.
Berechtigungsspeicherung
Der Browser speichert die Berechtigungsfreigaben. Die Berechtigung kann über die Websiteinformationen des Browsers widerrufen werden.
Feedback
Das Chrome-Team möchte mehr über Ihre Erfahrungen mit der Window Management API erfahren.
Informationen zum API-Design
Funktioniert die API nicht wie erwartet? Oder fehlen Methoden oder Eigenschaften, die Sie zur Implementierung Ihrer Idee benötigen? Haben Sie Fragen oder Kommentare zum Sicherheitsmodell?
- Reichen Sie ein Problem mit der Spezifikation im entsprechenden GitHub-Repository ein oder fügen Sie Ihre Gedanken zu einem vorhandenen Problem hinzu.
Problem mit der Implementierung melden
Haben Sie einen Fehler in der Chrome-Implementierung gefunden? Oder unterscheidet sich die Implementierung von der Spezifikation?
- Melden Sie den Fehler unter new.crbug.com. Geben Sie so viele Details wie möglich an, eine einfache Anleitung zur Reproduktion und geben Sie
Blink>Screen>MultiScreenin das Feld Components ein. Glitch eignet sich hervorragend, um schnell und einfach Reproduktionen zu teilen.
Unterstützung für die API anzeigen
Beabsichtigen Sie, die Window Management API zu verwenden? Ihre öffentliche Unterstützung hilft dem Chrome-Team, Funktionen zu priorisieren, und zeigt anderen Browseranbietern, wie wichtig es ist, sie zu unterstützen.
- Teilen Sie im WICG-Discourse-Thread mit, wie Sie es verwenden möchten.
- Senden Sie einen Tweet an @ChromiumDev mit dem Hashtag
#WindowManagementund teilen Sie uns mit, wo und wie Sie ihn verwenden. - Bitten Sie andere Browseranbieter, die API zu implementieren.
Nützliche Links
- Spezifikationsentwurf
- Öffentliche Erläuterung
- Demo der Window Management API | Demoquelle der Window Management API
- Chromium-Tracking-Fehler
- Eintrag in ChromeStatus.com
- Blink-Komponente:
Blink>Screen>MultiScreen - TAG-Überprüfung
- Testabsicht
Danksagungen
Die Spezifikation der Window Management API wurde von Victor Costan, Joshua Bell und Mike Wasserman bearbeitet. Die API wurde von Mike Wasserman und Adrienne Walker implementiert. Dieser Artikel wurde von Joe Medley, François Beaufort und Kayce Basques geprüft. Vielen Dank an Laura Torrent Puig für die Fotos.