NavigationActivation.navigationType — Eigenschaft · JavaScript-Referenz

Signatur

get NavigationActivation.navigationType

Beschreibung

Die Eigenschaft navigationType der Schnittstelle NavigationActivation gibt an, wie eine dokumentübergreifende Navigation ausgelöst wurde. Ein NavigationActivation-Objekt bekommst du an zwei Stellen: über navigation.activation im neu geladenen Dokument und über event.activation im pageswap-Ereignis des Dokuments, das gerade verlassen wird.

Mögliche Werte:

"push" – normale Navigation zu einer neuen URL, dabei entsteht ein neuer Verlaufseintrag (z. B. Linkklick).
"replace" – der aktuelle Verlaufseintrag wird ersetzt (z. B. location.replace()).
"reload" – die Seite wurde neu geladen.
"traverse" – Bewegung innerhalb des Verlaufs, also Zurück oder Vor.

Am häufigsten brauchst du die Eigenschaft bei dokumentübergreifenden View Transitions: In den Ereignissen pagereveal und pageswap kannst du abhängig vom Navigationstyp unterschiedliche Animationen wählen, etwa eine Wischbewegung nach rechts bei „Zurück“ und nach links bei „Vorwärts“. Zusammen mit activation.from und activation.entry erkennst du außerdem, von welcher Seite der Nutzer kommt.

Rückgabewert

Typ

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

Beschreibung

Ein String mit dem Typ der Navigation, die das Dokument aktiviert hat (bei navigation.activation) oder gleich aktivieren wird (bei pageswap).

Beispiele

Navigationstyp beim Laden der Seite auslesen

// Prüfen, ob die API vorhanden ist, bevor darauf zugegriffen wird
if ('navigation' in window && navigation.activation) {
  const { navigationType } = navigation.activation;
  console.log(`Seite geladen per: ${navigationType}`);

  if (navigationType === 'reload') {
    console.log('Neu geladen – Formularentwurf aus sessionStorage wiederherstellen');
  }
}

Seite geladen per: reload Neu geladen – Formularentwurf aus sessionStorage wiederherstellen

Richtungsabhängige View Transition im pagereveal-Ereignis

// Im neuen Dokument: Animation je nach Navigationstyp wählen
window.addEventListener('pagereveal', (event) => {
  if (!event.viewTransition || !navigation.activation) return;

  const { navigationType, from, entry } = navigation.activation;
  let richtung = 'vorwaerts';

  if (navigationType === 'traverse' && from && from.index > entry.index) {
    richtung = 'zurueck';
  } else if (navigationType === 'reload') {
    // Bei Reload keine Animation
    event.viewTransition.skipTransition();
    return;
  }

  event.viewTransition.types.add(richtung);
});

Im alten Dokument per pageswap reagieren

// Im Dokument, das gerade verlassen wird
window.addEventListener('pageswap', (event) => {
  // activation ist null, wenn das Ziel ursprungsfremd ist
  if (!event.activation) return;

  const typ = event.activation.navigationType;
  const ziel = new URL(event.activation.entry.url);
  console.log(`Verlasse Seite (${typ}) Richtung ${ziel.pathname}`);

  if (event.viewTransition && typ === 'traverse') {
    event.viewTransition.types.add('zurueck');
  }
});

Verlasse Seite (push) Richtung /produkte/42

// Wichtig · Fallstricke

Browserunterstützung: NavigationActivation gibt es in Chromium-Browsern ab Version 123. Andere Engines unterstützen die Navigation API zum Teil erst neuerdings oder gar nicht. Prüfe deshalb vorher mit 'navigation' in window und navigation.activation.
navigation.activation kann null sein, und event.activation im pageswap-Ereignis ist bei ursprungsfremden Navigationen (anderer Origin) null. Prüfe deshalb immer auf null, bevor du auf navigationType zugreifst.
"traverse" sagt nichts über die Richtung aus. Ob der Nutzer zurück oder vor navigiert ist, erkennst du nur, wenn du from.index mit entry.index vergleichst.
Die Eigenschaft beschreibt nur dokumentübergreifende Navigationen. Für Navigationen innerhalb derselben Seite (SPA) nimmst du NavigateEvent.navigationType im navigate-Ereignis.
Die Eigenschaft ist schreibgeschützt. Zuweisungen werden ohne Fehlermeldung ignoriert, im Strict Mode lösen sie einen TypeError aus.

Siehe auch

NavigationActivation.entry NavigationActivation.from NavigationTransition.navigationType NavigateEvent.navigationType Navigation.activation