Window.screenX — Eigenschaft · JavaScript-Referenz

Signatur

Window.screenX

Beschreibung

Die schreibgeschützte Eigenschaft window.screenX liefert die horizontale Position des äußeren Browserfensters, also einschließlich Rahmen und Werkzeugleisten, relativ zum linken Rand des Bildschirms. Der Wert wird in CSS-Pixeln angegeben und ist eine Zahl, die bei aktuellen Browsern auch Nachkommastellen haben kann.

Gebraucht wird die Eigenschaft vor allem, um Pop-up-Fenster relativ zum aktuellen Fenster zu positionieren (z. B. ein OAuth-Anmeldefenster mittig über der Anwendung), um die Fensterposition für die nächste Sitzung zu speichern oder um Anwendungen mit mehreren Fenstern abzustimmen. Zusammen mit screenY, outerWidth und outerHeight erhält man die vollständige Geometrie des Fensters.

screenLeft ist ein Alias mit identischem Wert. Er stammt ursprünglich vom Internet Explorer und ist inzwischen standardisiert. Bei Systemen mit mehreren Monitoren bezieht sich der Wert auf den virtuellen Gesamtbildschirm. Er kann deshalb negativ sein, wenn das Fenster auf einem Monitor links vom Hauptbildschirm liegt.

Für die Eigenschaft gibt es kein eigenes Ereignis, das Änderungen meldet. Wenn das Fenster verschoben wird, ohne dass sich seine Größe ändert, wird resize nicht ausgelöst. Wer Positionsänderungen erkennen will, muss den Wert daher regelmäßig abfragen.

Rückgabewert

Typ

number

Beschreibung

Horizontaler Abstand des Fensters zum linken Rand des Bildschirms in CSS-Pixeln. Kann bei mehreren Monitoren negativ sein und in manchen Browsern Nachkommastellen haben.

Beispiele

Fensterposition auslesen

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

Fenster liegt bei x=120, y=80 true

Pop-up mittig über dem aktuellen Fenster öffnen

const openCenteredPopup = (url, width = 500, height = 600) => {
  const left = window.screenX + (window.outerWidth - width) / 2;
  const top = window.screenY + (window.outerHeight - height) / 2;
  return window.open(
    url,
    'login',
    `popup,width=${width},height=${height},left=${Math.round(left)},top=${Math.round(top)}`
  );
};

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

Verschieben des Fensters per Abfrage erkennen

let lastX = window.screenX;

const watchPosition = () => {
  if (window.screenX !== lastX) {
    console.log(`Fenster verschoben: ${lastX} → ${window.screenX}`);
    lastX = window.screenX;
    localStorage.setItem('winX', String(lastX));
  }
  requestAnimationFrame(watchPosition);
};

requestAnimationFrame(watchPosition);

Fenster verschoben: 120 → 340

// Wichtig · Fallstricke

Negative Werte: Liegt ein Monitor links vom Hauptbildschirm, liefert screenX negative Zahlen. Den Wert also nicht mit Math.max(0, …) abschneiden.
Kein Änderungsereignis: Das Verschieben des Fensters löst kein Ereignis aus. Der Wert muss per Abfrage beobachtet werden, etwa mit requestAnimationFrame oder setInterval.
Zoom und Skalierung: Der Wert wird in CSS-Pixeln angegeben. Er hängt deshalb vom Seitenzoom und von devicePixelRatio ab und entspricht nicht unbedingt den physischen Pixeln.
Datenschutz: Einige Browser, zum Beispiel Firefox mit privacy.resistFingerprinting oder der Tor Browser, liefern zum Schutz vor Fingerprinting absichtlich 0 oder gerundete Werte.
Mobilgeräte und Wayland: Auf Mobilgeräten und unter manchen Linux-Fenstersystemen wie Wayland ist der Wert meist 0, weil es dort keine frei verschiebbaren Fenster gibt oder die Position nicht offengelegt wird.
In iframes gibt screenX die Position des obersten Browserfensters zurück, nicht die des iframes.
Die Eigenschaft ist schreibgeschützt. Das Fenster lässt sich mit window.moveTo() verschieben, was aber nur bei Fenstern funktioniert, die per Skript geöffnet wurden.

Siehe auch

Window.screenY Window.screenLeft Window.outerWidth Window.moveTo() Window.open() Screen MouseEvent.screenX