Navigation.activation — Eigenschaft · JavaScript-Referenz

Signatur

get Navigation.activation

Beschreibung

Die schreibgeschützte Eigenschaft navigation.activation beschreibt, wie das aktuelle Dokument erreicht wurde. Sie liefert ein NavigationActivation-Objekt mit drei Eigenschaften:

entry: der NavigationHistoryEntry, der beim Aktivieren des Dokuments der aktuelle Eintrag war.
from: der NavigationHistoryEntry des vorherigen Dokuments oder null, wenn dieses nicht same-origin war bzw. es das erste Dokument im Tab ist.
navigationType: die Art der Navigation, also "push", "replace", "reload" oder "traverse".

Man braucht sie vor allem bei dokumentübergreifenden View Transitions. Im Handler von pagereveal lässt sich damit prüfen, von welcher Seite der Nutzer kam und ob er vor- oder zurückgeblättert hat. Danach wählt man die passende Animation aus, zum Beispiel eine Slide-Richtung. Auch Analysen wie „Neu geladen oder über den Verlauf zurück?“ lassen sich damit beantworten, ohne auf die veraltete Schnittstelle performance.navigation zurückzugreifen.

Wichtig: Der Wert bezieht sich nur auf die Navigation, mit der das Dokument geladen wurde. Navigationen innerhalb desselben Dokuments (z. B. über history.pushState() oder navigation.navigate() mit Abfangen durch intercept()) ändern activation nicht. Den aktuellen Eintrag liefert dafür navigation.currentEntry.

Rückgabewert

Typ

NavigationActivation | null

Beschreibung

Ein NavigationActivation-Objekt mit entry, from und navigationType. null, wenn es sich um das anfängliche about:blank-Dokument handelt.

Beispiele

Art der Aktivierung auslesen

// Mit Feature-Erkennung, da nicht alle Browser die Navigation API kennen
if ('navigation' in window && navigation.activation) {
  const { navigationType, from, entry } = navigation.activation;
  console.log('Navigationstyp:', navigationType);
  console.log('Vorherige URL:', from?.url ?? '(unbekannt / cross-origin)');
  console.log('Aktuelle URL:', entry.url);
}

Navigationstyp: push Vorherige URL: https://example.com/produkte Aktuelle URL: https://example.com/produkte/42

Richtung für dokumentübergreifende View Transitions festlegen

// Im <head> einbinden, damit der Listener vor dem ersten Rendern aktiv ist
window.addEventListener('pagereveal', (event) => {
  if (!event.viewTransition || !navigation.activation) return;

  const { navigationType, from, entry } = navigation.activation;
  let direction = 'forward';

  // Beim Zurückblättern die Animation umkehren
  if (navigationType === 'traverse' && from && from.index > entry.index) {
    direction = 'backward';
  }

  event.viewTransition.types.add(direction);
  // In CSS: html:active-view-transition-type(backward) { ... }
});

Neuladen erkennen und Zustand wiederherstellen

const restoreDraft = () => {
  const draft = sessionStorage.getItem('formular-entwurf');
  if (draft) document.querySelector('#nachricht').value = draft;
};

if (navigation.activation?.navigationType === 'reload') {
  console.log('Seite wurde neu geladen – Entwurf wird wiederhergestellt');
  restoreDraft();
}

Seite wurde neu geladen – Entwurf wird wiederhergestellt

// Wichtig · Fallstricke

Browser-Unterstützung: Verfügbar ab Chromium 123. In Firefox und Safari ist die Navigation API erst in neueren Versionen oder noch gar nicht vorhanden. Deshalb immer mit 'navigation' in window und optionaler Verkettung (?.) absichern.
from ist null, wenn die vorherige Seite von einem anderen Ursprung kam oder das Dokument das erste im Tab ist. Nie ohne Prüfung darauf zugreifen.
Navigationen innerhalb desselben Dokuments ändern den Wert nicht. Für Single-Page-Apps sind navigation.currentEntry und das Ereignis navigate die richtige Wahl.
Wird die Seite aus dem Back/Forward-Cache wiederhergestellt, wird activation aktualisiert. Den Wert also besser in pagereveal auslesen als nur einmal beim ersten Laden.
Das Gegenstück auf der verlassenen Seite ist PageSwapEvent.activation im Ereignis pageswap.

Siehe auch

Navigation AnimationEvent.animation Navigation.transition Navigation.canGoBack Navigation.canGoForward