Window.screenLeft — Eigenschaft · JavaScript-Referenz

Signatur

Window.screenLeft

Beschreibung

Die schreibgeschützte Eigenschaft window.screenLeft gibt an, wie weit das Browserfenster vom linken Rand des Bildschirms entfernt ist. Die Angabe erfolgt in CSS-Pixeln. Die Eigenschaft ist ein Alias von window.screenX. Ursprünglich wurde sie nur vom Internet Explorer unterstützt, inzwischen ist sie in allen modernen Browsern standardisiert (CSSOM View Module).

Gebraucht wird sie vor allem, wenn man Popup-Fenster relativ zum aktuellen Fenster platzieren möchte, zum Beispiel für OAuth-Login-Dialoge, die zentriert über dem Hauptfenster erscheinen sollen. Auch um zu erkennen, auf welchem Monitor in einer Mehrbildschirm-Umgebung das Fenster gerade liegt, kann der Wert helfen.

Bei mehreren Monitoren kann der Wert negativ sein, etwa wenn ein zweiter Bildschirm links vom Hauptbildschirm angeordnet ist. Der Wert bezieht sich auf den äußeren Fensterrahmen und nicht auf den Anzeigebereich (Viewport) der Seite.

Rückgabewert

Typ

number

Beschreibung

Abstand in CSS-Pixeln zwischen dem linken Fensterrand und dem linken Rand des Bildschirms. Kann bei Mehrbildschirm-Aufbauten negativ sein.

Beispiele

Fensterposition auslesen

const x = window.screenLeft;
const y = window.screenTop;
console.log(`Fenster liegt bei x=${x}, y=${y}`);

Fenster liegt bei x=120, y=80

Popup zentriert über dem aktuellen Fenster öffnen

const openCenteredPopup = (url, width = 500, height = 600) => {
  // screenLeft/screenTop berücksichtigen die Lage auf Multi-Monitor-Systemen
  const left = window.screenLeft + (window.outerWidth - width) / 2;
  const top = window.screenTop + (window.outerHeight - height) / 2;
  return window.open(
    url,
    'login',
    `width=${width},height=${height},left=${Math.round(left)},top=${Math.round(top)}`
  );
};

document.querySelector('#login')?.addEventListener('click', () => {
  openCenteredPopup('https://example.com/oauth');
});

Fensterverschiebung beobachten (Polling)

// Es gibt kein 'move'-Event, daher wird per Intervall geprüft
let lastLeft = window.screenLeft;

const timer = setInterval(() => {
  if (window.screenLeft !== lastLeft) {
    console.log(`Fenster verschoben: ${lastLeft} → ${window.screenLeft}`);
    lastLeft = window.screenLeft;
  }
}, 500);

// Nach 30 Sekunden Beobachtung beenden
setTimeout(() => clearInterval(timer), 30_000);

Fenster verschoben: 120 → 340

// Wichtig · Fallstricke

Kompatibilität: Firefox unterstützt screenLeft erst seit Version 64. Wer ältere Browser berücksichtigen muss, nutzt als Rückfall window.screenLeft ?? window.screenX.
Schreibgeschützt: Eine Zuweisung verschiebt das Fenster nicht. Dafür gibt es window.moveTo() bzw. window.moveBy(), die aber meist nur bei selbst geöffneten Popups funktionieren.
Negative Werte: Bei mehreren Monitoren kann der Wert kleiner als 0 sein. Nicht einfach auf 0 begrenzen, sonst öffnen sich Popups auf dem falschen Bildschirm.
Zoom und Skalierung: Der Wert ist in CSS-Pixeln angegeben und kann daher bei Browser-Zoom oder hoher Bildschirmdichte (devicePixelRatio) von den physischen Pixeln abweichen.
Datenschutz: Manche Browser mit Schutz gegen Fingerprinting (z. B. Firefox mit resistFingerprinting, Tor Browser) geben feste Werte wie 0 zurück. In mobilen Browsern ist der Wert in der Regel 0.
Es gibt kein Event, das beim Verschieben des Fensters ausgelöst wird. Wer Änderungen erkennen will, muss den Wert regelmäßig abfragen.

Siehe auch

Window.screenTop Window.screenX Window.screenY Window.outerWidth Window.moveTo() Window.open() Screen