Window.parent — Eigenschaft · JavaScript-Referenz

Signatur

Window.parent

Beschreibung

Die schreibgeschützte Eigenschaft window.parent liefert das WindowProxy-Objekt des Fensters, das das aktuelle Dokument in einem <iframe>, <frame>, <object> oder <embed> eingebettet hat. Hat das Fenster kein übergeordnetes Fenster, weil es selbst das oberste ist, verweist parent auf sich selbst. Dann gilt window.parent === window.

Gebraucht wird die Eigenschaft vor allem, wenn eingebettete Inhalte mit der einbettenden Seite kommunizieren sollen. Typische Fälle sind Widgets, Zahlungsformulare, Editoren in iframes oder Werbeeinbindungen. Der übliche Weg dafür ist parent.postMessage(). Damit lassen sich auch über Ursprungsgrenzen hinweg sicher Nachrichten senden.

Wichtig ist der Unterschied zu window.top: parent geht nur eine Ebene nach oben, top springt direkt zum obersten Fenster der Hierarchie. Bei verschachtelten Frames erreicht man höhere Ebenen mit parent.parent und so weiter.

Liegen beide Dokumente auf demselben Ursprung, kann man über parent direkt auf parent.document, globale Variablen und Funktionen der Elternseite zugreifen. Bei unterschiedlichen Ursprüngen verhindert die Same-Origin-Policy fast jeden Zugriff. Erlaubt bleiben nur wenige Eigenschaften und Methoden wie postMessage(), location (nur Schreiben) und frames.

Rückgabewert

Typ

WindowProxy

Beschreibung

Das übergeordnete Fenster. Im obersten Fenster ist es das Fenster selbst (window). In einem losgelösten oder entfernten Kontext kann der Wert null sein.

Beispiele

Prüfen, ob die Seite in einem iframe läuft

const istEingebettet = window.parent !== window;

if (istEingebettet) {
  document.body.classList.add('embedded');
  console.log('Seite läuft in einem iframe');
} else {
  console.log('Seite läuft als oberstes Fenster');
}

Seite läuft als oberstes Fenster

Nachricht aus dem iframe an die Elternseite senden (ursprungsübergreifend)

// Im iframe (z. B. https://widget.example.com)
const hoeheMelden = () => {
  const hoehe = document.documentElement.scrollHeight;
  window.parent.postMessage(
    { typ: 'resize', hoehe },
    'https://shop.example.com' // genauen Ziel-Ursprung angeben, nicht '*'
  );
};

new ResizeObserver(hoeheMelden).observe(document.body);

// In der Elternseite (https://shop.example.com)
window.addEventListener('message', (event) => {
  if (event.origin !== 'https://widget.example.com') return;
  if (event.data?.typ === 'resize') {
    document.querySelector('#widget').style.height = `${event.data.hoehe}px`;
  }
});

Direkter Zugriff bei gleichem Ursprung

// Im iframe, gleicher Ursprung wie die Elternseite
try {
  const titel = window.parent.document.title;
  console.log(`Elternseite: ${titel}`);
  // Funktion der Elternseite aufrufen, falls vorhanden
  window.parent.onWidgetReady?.();
} catch (err) {
  // Bei fremdem Ursprung: SecurityError
  console.warn('Kein Zugriff auf die Elternseite:', err.name);
}

Elternseite: Mein Dashboard

Ebenen der Frame-Hierarchie zählen

const frameTiefe = () => {
  let tiefe = 0;
  let aktuell = window;
  while (aktuell.parent !== aktuell) {
    aktuell = aktuell.parent;
    tiefe++;
  }
  return tiefe;
};

console.log(`Verschachtelungstiefe: ${frameTiefe()}`);

Verschachtelungstiefe: 0

// Wichtig · Fallstricke

Same-Origin-Policy: Bei unterschiedlichem Ursprung löst ein Zugriff auf parent.document, auf globale Variablen oder auf die meisten Eigenschaften einen SecurityError (DOMException) aus. Zur Kommunikation zwischen Ursprüngen dient ausschließlich postMessage().
Sicherheit bei postMessage: Gib als targetOrigin immer den genauen Ursprung an statt '*'. Sonst kann eine fremde Seite, die dein iframe einbettet, sensible Daten mitlesen. Auf der Empfängerseite muss event.origin unbedingt geprüft werden.
Kein Oberstes-Fenster-Test mit parent allein: window.parent === window zeigt nur, dass es keine übergeordnete Ebene gibt. Um das oberste Fenster zu erreichen, ist window.top der direktere Weg.
Sandbox und Einbettungsschutz: Ein iframe mit dem Attribut sandbox ohne allow-same-origin bekommt einen undurchsichtigen Ursprung. Direkte Zugriffe schlagen dann auch bei gleicher Domain fehl. Gegen unerwünschtes Einbetten (Clickjacking) helfen die Header Content-Security-Policy: frame-ancestors bzw. X-Frame-Options, nicht eigene Prüfungen per JavaScript.
Kompatibilität: Wird von allen Browsern seit jeher unterstützt. In Web Workern und in Node.js gibt es window.parent nicht.

Siehe auch

Window.top Window.postMessage() Window.frameElement Window.frames Window.opener TextTrackCue.id