Signatur
Beschreibung
Die Eigenschaft label des ScreenDetailed-Interfaces liefert eine beschreibende Bezeichnung des jeweiligen Bildschirms, etwa "Built-in Retina Display" oder den Modellnamen eines externen Monitors. Sie gehört zur Window Management API (früher „Multi-Screen Window Placement API“). Ein ScreenDetailed-Objekt bekommt man über das Promise von window.getScreenDetails(), und zwar über die Eigenschaften screens oder currentScreen.
Gedacht ist label vor allem für die Benutzeroberfläche. Zeigt eine Anwendung auf mehreren Monitoren etwa Präsentationen, Handelsplattformen oder Bildbearbeitung an, kann sie den Nutzer den Zielbildschirm über eine Auswahlliste mit verständlichen Namen wählen lassen. Das ist deutlich angenehmer als nur Koordinaten oder Indizes.
Der Wert kommt vom Betriebssystem bzw. Browser und ist nicht standardisiert. Er kann leer sein, sich zwischen Plattformen unterscheiden und muss nicht eindeutig sein: Zwei baugleiche Monitore haben unter Umständen dieselbe Bezeichnung. Als stabile Kennung eignet sich label daher nicht.
Rückgabewert
"Built-in Retina Display" oder "DELL U2720Q". Kann ein leerer String sein, wenn keine Bezeichnung verfügbar ist oder der Browser sie aus Datenschutzgründen zurückhält.Beispiele
Bezeichnungen aller angeschlossenen Bildschirme ausgeben
const listScreens = async () => {
if (!('getScreenDetails' in window)) {
console.warn('Window Management API wird nicht unterstützt.');
return;
}
// Löst ggf. eine Berechtigungsabfrage aus
const details = await window.getScreenDetails();
details.screens.forEach((screen, i) => {
console.log(`${i}: ${screen.label || '(ohne Bezeichnung)'} – ${screen.width}×${screen.height}`);
});
};
listScreens();Bildschirm-Auswahl für ein Präsentationsfenster
const buildScreenPicker = async (selectEl) => {
const details = await window.getScreenDetails();
selectEl.replaceChildren();
details.screens.forEach((screen, i) => {
const option = document.createElement('option');
option.value = String(i);
// textContent statt innerHTML – label stammt nicht aus eigenem Code
option.textContent = `${screen.label || `Bildschirm ${i + 1}`}${screen.isPrimary ? ' (primär)' : ''}`;
selectEl.append(option);
});
selectEl.addEventListener('change', () => {
const target = details.screens[Number(selectEl.value)];
window.open('/praesentation.html', '_blank',
`left=${target.availLeft},top=${target.availTop},width=${target.availWidth},height=${target.availHeight}`);
});
};
buildScreenPicker(document.querySelector('#screen-select'));Aktuellen Bildschirm anzeigen und auf Wechsel reagieren
const details = await window.getScreenDetails();
const showCurrent = () => {
console.log('Fenster befindet sich auf:', details.currentScreen.label);
};
showCurrent();
// Wird ausgelöst, wenn das Fenster auf einen anderen Bildschirm wandert
details.addEventListener('currentscreenchange', showCurrent);// Wichtig · Fallstricke
- Browser-Unterstützung: Experimentell und nur in Chromium-Browsern (Chrome, Edge, Opera) ab Version 100 verfügbar. Firefox und Safari unterstützen sie nicht. Vor der Nutzung per
'getScreenDetails' in windowprüfen. - Berechtigung und Kontext:
getScreenDetails()braucht einen sicheren Kontext (HTTPS) und die Berechtigungwindow-management(früherwindow-placement). Lehnt der Nutzer ab, wird das Promise mit einemNotAllowedErrorabgelehnt. In iframes greift außerdem die Permissions-Policy. - Keine eindeutige Kennung:
labelkann leer sein oder bei baugleichen Monitoren doppelt vorkommen. Nicht als Schlüssel zum Speichern von Nutzereinstellungen verwenden. Besser Position und Größe (left,top,width,height) mit einbeziehen. - Datenschutz: Monitor-Modellnamen tragen zum Fingerprinting bei. Deshalb ist die Eigenschaft nur nach ausdrücklicher Zustimmung zugänglich.
- Sicherheit: Den Wert per
textContentund nicht perinnerHTMLin die Seite einfügen, weil er aus einer externen Quelle (Betriebssystem/EDID) stammt. - Die Eigenschaft ist schreibgeschützt. Zuweisungen werden stillschweigend ignoriert, im Strict Mode wird ein
TypeErrorgeworfen.