NavigationCurrentEntryChangeEvent.navigationType — Eigenschaft · JavaScript-Referenz

Signatur

NavigationCurrentEntryChangeEvent.navigationType

Beschreibung

Die Eigenschaft navigationType gehört zum NavigationCurrentEntryChangeEvent. Dieses Event wird am globalen navigation-Objekt als currententrychange ausgelöst, sobald sich navigation.currentEntry ändert. navigationType sagt dir, wie es zu dieser Änderung kam.

Mögliche Werte:

"push": Ein neuer Eintrag wurde zum Verlauf hinzugefügt, z. B. durch einen Link-Klick, navigation.navigate() oder history.pushState().
"replace": Der aktuelle Eintrag wurde ersetzt, z. B. durch navigation.navigate(url, { history: "replace" }) oder history.replaceState().
"reload": Der aktuelle Eintrag wurde neu geladen (navigation.reload()).
"traverse": Es wurde im Verlauf gesprungen, etwa mit Zurück/Vor, navigation.back(), navigation.forward() oder navigation.traverseTo().
null: Die Änderung kam durch navigation.updateCurrentEntry() zustande. Dabei wird nur der Zustand geändert, eine echte Navigation findet nicht statt.

Typische Einsatzfälle in Single-Page-Anwendungen: Scrollposition nur bei traverse wiederherstellen, Seitenaufrufe für die Analyse nur bei push zählen oder bei reinen Zustandsänderungen (null) nichts neu rendern. Zusammen mit event.from (dem vorherigen NavigationHistoryEntry) lässt sich so ein vollständiges Bild der Navigation erstellen.

Rückgabewert

Typ

"push" | "replace" | "reload" | "traverse" | null

Beschreibung

Ein String, der die Art der auslösenden Navigation angibt, oder null, wenn die Änderung durch navigation.updateCurrentEntry() ausgelöst wurde.

Beispiele

Navigationstyp mit addEventListener protokollieren

if ('navigation' in window) {
  navigation.addEventListener('currententrychange', (event) => {
    const from = event.from?.url ?? '(unbekannt)';
    const to = navigation.currentEntry.url;
    console.log(`[${event.navigationType}] ${from} → ${to}`);
  });

  // Zustandsänderung ohne echte Navigation auslösen
  navigation.updateCurrentEntry({ state: { tab: 'details' } });
}

[null] https://example.com/produkte → https://example.com/produkte

Seitenaufrufe nur bei echten neuen Einträgen zählen

const trackPageView = (url) => {
  // z. B. an einen Analysedienst senden
  navigator.sendBeacon('/analytics', JSON.stringify({ url, ts: Date.now() }));
};

navigation.addEventListener('currententrychange', (event) => {
  switch (event.navigationType) {
    case 'push':
    case 'replace':
      trackPageView(navigation.currentEntry.url);
      break;
    case 'traverse':
      console.log('Zurück/Vor – kein neuer Seitenaufruf');
      break;
    case 'reload':
      console.log('Neu geladen');
      break;
    default: // null → nur updateCurrentEntry()
      break;
  }
});

Über die on-Property: Scrollposition bei Zurück/Vor wiederherstellen

navigation.oncurrententrychange = (event) => {
  if (event.navigationType !== 'traverse') return;
  const state = navigation.currentEntry.getState();
  if (state?.scrollY != null) {
    window.scrollTo(0, state.scrollY);
  }
};

// Scrollposition regelmäßig im aktuellen Eintrag speichern
window.addEventListener('scroll', () => {
  navigation.updateCurrentEntry({ state: { scrollY: window.scrollY } });
}, { passive: true });

// Handler wieder entfernen
// navigation.oncurrententrychange = null;

// Wichtig · Fallstricke

Browser-Kompatibilität: Die Navigation API gibt es in Chromium-Browsern seit Version 102. Firefox und Safari haben sie erst später eingeführt. Prüfe die Unterstützung vorher mit 'navigation' in window und sieh für Details in aktuellen Kompatibilitätstabellen nach.
null immer berücksichtigen: Jeder Aufruf von navigation.updateCurrentEntry() löst currententrychange mit navigationType === null aus. Das ist wichtig, wenn du wie im Scroll-Beispiel oft den Zustand aktualisierst. Wer darauf nicht achtet, rendert unnötig neu oder zählt Seitenaufrufe doppelt.
Das Event kommt nach der Änderung von navigation.currentEntry. Um eine Navigation abzufangen oder zu verhindern, nutzt du das navigate-Event (NavigateEvent.navigationType).
Die Eigenschaft ist nur lesbar. Beim eigenen Erzeugen mit new NavigationCurrentEntryChangeEvent(type, { navigationType, from }) ist from Pflicht.
Beim ersten Laden der Seite wird kein currententrychange ausgelöst.

Siehe auch

NavigationActivation.navigationType NavigationCurrentEntryChangeEvent.from NavigationTransition.navigationType NavigateEvent.navigationType AnimationEvent.animationName