ScreenDetailed.availLeft — Eigenschaft · JavaScript-Referenz

Signatur

ScreenDetailed.availLeft

Beschreibung

ScreenDetailed.availLeft gibt die x-Koordinate der linken Kante des verfügbaren Bereichs eines Bildschirms in CSS-Pixeln an. Der Wert bezieht sich auf das Koordinatensystem der virtuellen Bildschirm-Anordnung, also auf alle angeschlossenen Monitore zusammen. Verfügbar heißt: Bereiche, die das Betriebssystem belegt, zum Beispiel eine seitlich angedockte Taskleiste oder das Dock unter macOS, sind abgezogen.

Die Eigenschaft gehört zur Window Management API. Du bekommst ScreenDetailed-Objekte über window.getScreenDetails(). Beim ersten Aufruf fragt der Browser den Nutzer um Erlaubnis (Berechtigung window-management). Danach liefert screenDetails.screens alle Bildschirme und screenDetails.currentScreen den Bildschirm, auf dem das Fenster gerade liegt.

Typische Anwendungen sind Präsentationssoftware, Handelsplattformen oder Bildbearbeitung mit mehreren Fenstern. Zusammen mit availTop, availWidth und availHeight berechnest du damit Positionen für window.open() oder window.moveTo(), sodass neue Fenster genau auf einem bestimmten Monitor landen und nicht unter der Taskleiste verschwinden.

Der Wert kann negativ sein, zum Beispiel wenn ein sekundärer Monitor links neben dem Hauptbildschirm steht. Der Ursprung (0,0) liegt in der Regel an der oberen linken Ecke des primären Bildschirms.

Rückgabewert

Typ

number

Beschreibung

Die x-Koordinate der linken Kante des verfügbaren Bildschirmbereichs in CSS-Pixeln, bezogen auf die virtuelle Mehrbildschirm-Anordnung. Kann negativ sein.

Beispiele

Verfügbaren Bereich aller Bildschirme auflisten

const listScreens = async () => {
  if (!('getScreenDetails' in window)) {
    console.log('Window Management API nicht unterstützt');
    return;
  }
  const details = await window.getScreenDetails();
  for (const screen of details.screens) {
    console.log(
      `${screen.label}: availLeft=${screen.availLeft}, availTop=${screen.availTop}, ` +
      `${screen.availWidth}×${screen.availHeight}`
    );
  }
};

listScreens();

Eingebauter Bildschirm: availLeft=0, availTop=25, 1440×875 DELL U2720Q: availLeft=-2560, availTop=0, 2560×1400

Fenster auf einem zweiten Bildschirm öffnen

const openOnSecondaryScreen = async () => {
  const details = await window.getScreenDetails();
  // Einen Bildschirm suchen, der nicht der aktuelle ist
  const target = details.screens.find((s) => s !== details.currentScreen)
    ?? details.currentScreen;

  const width = 800;
  const height = 600;
  const left = target.availLeft + Math.round((target.availWidth - width) / 2);
  const top = target.availTop + Math.round((target.availHeight - height) / 2);

  window.open(
    '/praesentation.html',
    'praesentation',
    `left=${left},top=${top},width=${width},height=${height}`
  );
};

// window.open braucht eine Nutzeraktion
document.querySelector('#start').addEventListener('click', openOnSecondaryScreen);

Auf Änderungen der Anordnung reagieren

const watchCurrentScreen = async () => {
  const details = await window.getScreenDetails();

  const log = () => {
    const s = details.currentScreen;
    console.log(`Aktueller Bildschirm beginnt bei x=${s.availLeft}`);
  };

  log();
  // Fenster wurde auf einen anderen Monitor verschoben
  details.addEventListener('currentscreenchange', log);
  // Eigenschaften eines Bildschirms haben sich geändert (z. B. Taskleiste verschoben)
  details.currentScreen.addEventListener('change', log);
};

watchCurrentScreen();

Aktueller Bildschirm beginnt bei x=0

// Wichtig · Fallstricke

Kompatibilität: Nur in Chromium-Browsern (Chrome/Edge 100+). Firefox und Safari unterstützen die Window Management API nicht. Prüfe deshalb immer vorher mit 'getScreenDetails' in window.
Berechtigung: getScreenDetails() braucht die Erlaubnis window-management (früher window-placement) und einen sicheren Kontext (HTTPS). In iframes muss die Permissions-Policy window-management erlaubt sein. Lehnt der Nutzer ab, wird das Promise mit NotAllowedError abgelehnt.
Nicht verwechseln mit dem nicht standardisierten Screen.availLeft am einfachen window.screen. Das gibt es nur in manchen Browsern, und es liefert nur Werte für den aktuellen Bildschirm.
Negative Werte: Bildschirme links oder oberhalb des Hauptbildschirms haben negative Koordinaten. Klemme Werte also nicht auf ≥ 0.
Datenschutz: Details zu mehreren Bildschirmen eignen sich zum Fingerprinting. Frag die Berechtigung deshalb erst an, wenn der Nutzer die Funktion wirklich braucht.
Die Werte sind CSS-Pixel. Bei unterschiedlichen devicePixelRatio-Werten pro Monitor können die Übergänge zwischen den Bildschirmen ungenau sein.

Siehe auch

Window.open() ScreenDetailed.availTop ScreenDetailed.left ScreenDetailed.label ScreenDetailed.isInternal