Window.top — Eigenschaft · JavaScript-Referenz

Signatur

Window.top

Beschreibung

window.top ist eine schreibgeschützte Eigenschaft. Sie liefert das oberste Fenster einer Hierarchie aus verschachtelten Frames, also das Fenster, das direkt im Browser-Tab geladen ist. Läuft ein Skript in einem <iframe> (egal wie tief verschachtelt), zeigt top immer auf das äußerste Fenster. Läuft das Skript selbst auf oberster Ebene, gilt window.top === window.

Typische Einsatzfälle sind:

die Prüfung, ob eine Seite in einem Frame eingebettet ist (window.top !== window.self),
einfacher Schutz vor Framing (Frame-Busting),
Nachrichten an die oberste Seite mit top.postMessage(),
Navigation des gesamten Tabs aus einem Frame heraus, z. B. top.location.href = url.

Anders als window.parent, das nur eine Ebene nach oben geht, springt top immer direkt an die Spitze der Hierarchie. Stammt das oberste Fenster von einem anderen Ursprung (Origin), bekommt man nur ein eingeschränktes WindowProxy-Objekt: postMessage(), location (nur schreibend) und einige wenige andere Mitglieder sind dann erlaubt, der Zugriff auf document oder globale Variablen dagegen nicht.

Rückgabewert

Typ

WindowProxy | null

Beschreibung

Das oberste Window-Objekt der Frame-Hierarchie. In einem vom Dokument getrennten Browsing-Context (z. B. einem entfernten iframe) ist der Wert null.

Beispiele

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

const istEingebettet = window.top !== window.self;

if (istEingebettet) {
  document.body.classList.add('embedded');
  console.log('Seite läuft in einem Frame');
} else {
  console.log('Seite läuft auf oberster Ebene');
}

Seite läuft auf oberster Ebene

Nachricht aus einem verschachtelten iframe an die oberste Seite senden

// Im (beliebig tief verschachtelten) iframe:
const sendeHoehe = () => {
  const hoehe = document.documentElement.scrollHeight;
  window.top.postMessage({ typ: 'resize', hoehe }, 'https://www.example.com');
};

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

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

Einfaches Frame-Busting (aus dem Frame ausbrechen)

try {
  if (window.top !== window.self) {
    // Gesamten Tab auf die eigene Seite umleiten
    window.top.location.href = window.self.location.href;
  }
} catch (err) {
  // Sandbox-iframes können die Top-Navigation verbieten
  console.warn('Top-Navigation blockiert:', err.message);
  document.body.textContent = 'Diese Seite darf nicht eingebettet werden.';
}

Unterschied zwischen top und parent

// Hierarchie: Hauptseite > iframe A > iframe B (Skript läuft in B)
console.log(window.parent === window.top); // false – parent ist iframe A
console.log(window.parent.parent === window.top); // true

// Auf oberster Ebene:
// window.top === window && window.parent === window

false true

// Wichtig · Fallstricke

Same-Origin-Policy: Hat das oberste Fenster einen anderen Ursprung, führt der Zugriff auf z. B. top.document oder top.location.href (lesend) zu einem SecurityError. Zur Kommunikation zwischen Ursprüngen immer postMessage() nutzen und beim Empfänger event.origin prüfen.
Frame-Busting ist kein verlässlicher Schutz: Mit <iframe sandbox> ohne allow-top-navigation kann die einbettende Seite die Navigation von top verhindern. Gegen Clickjacking besser den HTTP-Header Content-Security-Policy: frame-ancestors 'self' (oder das ältere X-Frame-Options) setzen.
top ist schreibgeschützt und unforgeable: Anders als früher lässt sich die Eigenschaft nicht mehr durch eine globale Variable namens top überschreiben. Trotzdem sollte man keine eigene Variable top im globalen Gültigkeitsbereich deklarieren – var top = … wird ignoriert, und let top auf oberster Ebene eines klassischen Skripts wirft einen SyntaxError.
Innerhalb eines mit window.open() geöffneten Pop-ups zeigt top auf das Pop-up selbst, nicht auf das öffnende Fenster – dafür gibt es window.opener.
In Web Workern gibt es kein top; in Node.js ist die Eigenschaft ebenfalls nicht vorhanden.

Siehe auch

Window.parent Window.self Window.opener Window.frameElement Window.postMessage() Window.frames ScreenDetailed.top