Window — Schnittstelle · JavaScript-Referenz

Signatur

interface Window extends EventTarget

Beschreibung

Das Window-Interface steht für ein Fenster, einen Tab oder einen eingebetteten Rahmen (<iframe>), in dem ein DOM-Dokument geladen ist. Die Eigenschaft window.document verweist auf dieses Dokument. In Skripten im Browser ist ein Window-Objekt zugleich das globale Objekt: Globale Variablen, die mit var deklariert werden, und Funktionsdeklarationen auf oberster Ebene werden zu Eigenschaften von window. Deshalb kann man alert() statt window.alert() schreiben.

Über Window erreicht man zentrale Browser-Funktionen: location (URL und Navigation), history (Sitzungsverlauf), navigator (Browser-Informationen), localStorage/sessionStorage, Zeitgeber wie setTimeout() und requestAnimationFrame(), Maße wie innerWidth/innerHeight sowie Scroll-Methoden wie scrollTo(). Dazu kommen Methoden für die Kommunikation zwischen Fenstern wie postMessage() und open().

Da Window von EventTarget erbt, kann man mit addEventListener() auf fensterweite Ereignisse wie load, resize, scroll, beforeunload, online/offline oder message reagieren.

Für Code, der sowohl im Browser als auch in Web Workern oder Node.js laufen soll, nimmt man besser globalThis, weil es dort kein window gibt.

Rückgabewert

Typ

Window

Beschreibung

Window kann man nicht selbst erzeugen. Der Browser stellt pro Browsing-Kontext ein Objekt bereit, erreichbar über window, self, globalThis oder frames.

Beispiele

Globales Objekt und Zugriff auf das Dokument

// Top-Level-Deklarationen mit var werden zu Fenster-Eigenschaften
var appName = 'Demo';
const version = '1.0'; // const/let dagegen NICHT

console.log(window.appName);          // 'Demo'
console.log(window.version);          // undefined
console.log(window === globalThis);   // true
console.log(window.document === document); // true
console.log(window.document.title);   // Titel der aktuellen Seite

Demo undefined true true <Seitentitel>

Fenstergröße abfragen und auf resize reagieren (gedrosselt)

const logSize = () => {
  console.log(`Viewport: ${window.innerWidth} x ${window.innerHeight}`);
};

let frame = null;
const onResize = () => {
  if (frame) return;
  frame = window.requestAnimationFrame(() => {
    logSize();
    frame = null;
  });
};

window.addEventListener('resize', onResize);
logSize();

// Später aufräumen, z. B. beim Entfernen einer Komponente:
// window.removeEventListener('resize', onResize);

Viewport: 1280 x 720

Sicheres Messaging mit einem Popup über postMessage

const popup = window.open('https://partner.example.com/widget', 'widget', 'width=400,height=300');

window.addEventListener('message', (event) => {
  // Herkunft IMMER prüfen
  if (event.origin !== 'https://partner.example.com') return;
  console.log('Antwort vom Widget:', event.data);
});

// Nachricht nur an die erwartete Herkunft schicken
setTimeout(() => {
  popup?.postMessage({ type: 'init', theme: 'dark' }, 'https://partner.example.com');
}, 1000);

Antwort vom Widget: { type: 'ready' }

Umgebungsunabhängig auf das globale Objekt zugreifen

const isBrowser = typeof window !== 'undefined' && typeof window.document !== 'undefined';

const storage = isBrowser ? window.localStorage : null;
storage?.setItem('lastVisit', new Date().toISOString());

console.log(isBrowser ? 'Browser-Umgebung' : 'Kein window (Node.js/Worker)');

Browser-Umgebung

// Wichtig · Fallstricke

Verschmutzung des globalen Namensraums: var und Funktionsdeklarationen auf oberster Ebene landen auf window und können vorhandene Eigenschaften wie name, status oder top überschreiben oder mit ihnen kollidieren. Besser ES-Module oder const/let verwenden.
Benannter Zugriff auf Elemente: Elemente mit einer id sind als window[id] erreichbar. Darauf sollte man sich nicht verlassen, weil das zu schwer auffindbaren Fehlern führt und DOM-Clobbering-Angriffe ermöglicht.
Sicherheit bei postMessage(): Beim Empfangen immer event.origin prüfen und beim Senden nie '*' als Ziel angeben, wenn vertrauliche Daten übertragen werden. Bei window.open() möglichst noopener setzen, damit die geöffnete Seite nicht über window.opener auf die eigene Seite zugreifen kann (Reverse-Tabnabbing).
Same-Origin-Policy: Auf das Window eines fremden Ursprungs (etwa ein fremdes iframe oder Popup) ist nur ein sehr eingeschränkter Zugriff möglich, z. B. postMessage(), close() und location (nur schreibend). Andere Zugriffe werfen einen SecurityError.
Umgebungen: In Web Workern gibt es statt window nur self (WorkerGlobalScope), in Node.js gibt es kein window. Für portablen Code globalThis verwenden (ES2020).
Performance: Häufige Ereignisse wie scroll und resize drosseln, z. B. mit requestAnimationFrame(), und bei scroll die Option { passive: true } setzen.
Veraltete Teile wie showModalDialog(), window.event und synchrone Dialoge in iframes sollte man meiden. Das Ereignis unload wird schrittweise abgeschafft. Stattdessen pagehide oder visibilitychange verwenden.

Siehe auch

Document Window.prototype.open() Window.location HID Ink