NavigationCurrentEntryChangeEvent.from — Eigenschaft · JavaScript-Referenz

Signatur

NavigationCurrentEntryChangeEvent.from

Beschreibung

Die Eigenschaft from des NavigationCurrentEntryChangeEvent gibt den vorherigen Verlaufseintrag (NavigationHistoryEntry) zurück, also den Eintrag, der vor dem Wechsel navigation.currentEntry war. Den neuen Eintrag liest du dagegen direkt über navigation.currentEntry aus.

Das Ereignis currententrychange wird am navigation-Objekt ausgelöst, sobald sich der aktuelle Eintrag geändert hat. Das passiert bei gleichdokumentigen Navigationen (z. B. über navigation.navigate(), abgefangene Link-Klicks, history.pushState(), Vor/Zurück) und bei navigation.updateCurrentEntry().

Typische Anwendungsfälle sind das Speichern von Zustand pro Seite (z. B. Scrollposition oder Formulardaten im alten Eintrag), Analyse-Tracking („von wo nach wo“) und Übergangsanimationen, die von der Quellroute abhängen.

Zusammen mit event.navigationType kannst du unterscheiden, ob ein Push, Replace, Traverse (Vor/Zurück) oder Reload stattgefunden hat. Bei updateCurrentEntry() ist navigationType null, und from zeigt auf denselben Eintrag wie navigation.currentEntry.

Rückgabewert

Typ

NavigationHistoryEntry

Beschreibung

Der Verlaufseintrag, von dem aus navigiert wurde. Er bietet u. a. url, key, id, index, sameDocument und getState().

Beispiele

Quelle und Ziel eines Seitenwechsels protokollieren

navigation.addEventListener('currententrychange', (event) => {
  const von = new URL(event.from.url).pathname;
  const nach = new URL(navigation.currentEntry.url).pathname;
  console.log(`${event.navigationType}: ${von} → ${nach}`);
});

// Auslösen einer gleichdokumentigen Navigation
navigation.navigate('/produkte', { history: 'push' });

push: / → /produkte

Scrollposition des verlassenen Eintrags merken

const scrollPositionen = new Map();

navigation.addEventListener('currententrychange', (event) => {
  // Scrollposition dem alten Eintrag zuordnen (key bleibt bei Traverse stabil)
  scrollPositionen.set(event.from.key, window.scrollY);

  const gespeichert = scrollPositionen.get(navigation.currentEntry.key);
  if (event.navigationType === 'traverse' && gespeichert !== undefined) {
    requestAnimationFrame(() => window.scrollTo(0, gespeichert));
  }
});

Richtungsabhängige Übergangsanimation per on-Property

navigation.oncurrententrychange = (event) => {
  const richtung = navigation.currentEntry.index < event.from.index
    ? 'zurueck'
    : 'vor';
  document.documentElement.dataset.richtung = richtung;
  console.log('Richtung:', richtung, '| vorheriger Index:', event.from.index);
};

Richtung: vor | vorheriger Index: 0

updateCurrentEntry(): from entspricht dem aktuellen Eintrag

navigation.addEventListener('currententrychange', (event) => {
  if (event.navigationType === null) {
    console.log('Nur Zustand aktualisiert:', event.from === navigation.currentEntry);
    console.log('Neuer Zustand:', navigation.currentEntry.getState());
  }
});

navigation.updateCurrentEntry({ state: { filter: 'neu' } });

Nur Zustand aktualisiert: true Neuer Zustand: { filter: 'neu' }

// Wichtig · Fallstricke

Browser-Kompatibilität: Die Navigation API gibt es in Chromium-Browsern seit Version 102, in Firefox seit 147 und in Safari seit 26.2. Ältere Versionen unterstützen sie nicht. Prüfe deshalb vorher mit if ('navigation' in window) und sieh für diese Browser eine Ausweichlösung über popstate und die History API vor.
from ist schreibgeschützt. Wenn du ihr etwas zuweist, wird das ignoriert (im Strict Mode gibt es einen TypeError).
Wurde der Eintrag ersetzt (navigationType === 'replace'), ist from danach nicht mehr im Verlauf. event.from.index liefert dann -1, und getState() gibt undefined zurück. Den Zustand solltest du also sofort im Handler auslesen.
Das Ereignis wird erst nach dem Wechsel ausgelöst und lässt sich nicht abbrechen. Wenn du eine Navigation abfangen oder verhindern willst, nutze das Ereignis navigate.
Dokumentübergreifende Navigationen (echte Seitenladevorgänge) lösen kein currententrychange im alten Dokument aus.
Verwende key statt id, um Zustand einem Verlaufsplatz zuzuordnen: id ändert sich beim Ersetzen, key bleibt gleich.

Siehe auch

NavigationCurrentEntryChangeEvent NavigationCurrentEntryChangeEvent.navigationType NavigationHistoryEntry Navigation.currentEntry NavigationHistoryEntry.sameDocument