NavigationActivation.from — Eigenschaft · JavaScript-Referenz

Signatur

NavigationActivation.from

Beschreibung

Die schreibgeschützte Eigenschaft from des Interfaces NavigationActivation liefert ein NavigationHistoryEntry-Objekt. Es steht für den Verlaufseintrag des ausgehenden Dokuments, also der Seite, die der Nutzer gerade verlassen hat. Das Gegenstück ist NavigationActivation.entry, der Eintrag des Zieldokuments.

Auf ein NavigationActivation-Objekt kommt man auf zwei Wegen:

Über navigation.activation im neu geladenen Dokument, zum Beispiel im pagereveal-Event oder beim ersten Rendern.
Über event.activation im pageswap-Event des Dokuments, das gerade verlassen wird.

Gebraucht wird die Eigenschaft vor allem bei dokumentübergreifenden View Transitions (Übergängen zwischen zwei Seiten). Mit from.url lässt sich erkennen, von welcher Seite der Nutzer kommt, und die Animation daran anpassen, etwa „von der Übersicht zur Detailseite“ oder „zurück zur Liste“. Zusammen mit navigationType ("push", "replace", "reload", "traverse") kann man auch zwischen Vorwärts- und Rückwärtsnavigation unterscheiden.

Der Wert ist null, wenn das vorherige Dokument nicht vom selben Ursprung (Origin) stammt, wenn es keines gab (z. B. direkte Eingabe der URL oder ein neuer Tab) oder wenn der Eintrag aus anderen Gründen nicht offengelegt werden darf.

Rückgabewert

Typ

NavigationHistoryEntry | null

Beschreibung

Der Verlaufseintrag des ausgehenden Dokuments mit Eigenschaften wie url, key, id, index und sameDocument. null, wenn das vorherige Dokument einen anderen Ursprung hat oder es keines gibt.

Beispiele

Herkunftsseite beim Laden auslesen

// Im neu geladenen Dokument
const activation = navigation.activation;

if (activation?.from) {
  console.log('Gekommen von:', activation.from.url);
  console.log('Navigationstyp:', activation.navigationType);
} else {
  console.log('Keine Herkunft vom selben Ursprung bekannt');
}

Gekommen von: https://example.com/produkte Navigationstyp: push

View Transition je nach Herkunft anpassen (pagereveal)

window.addEventListener('pagereveal', (event) => {
  if (!event.viewTransition) return;

  const fromUrl = navigation.activation?.from?.url;
  if (!fromUrl) return;

  const fromPath = new URL(fromUrl).pathname;
  const toPath = new URL(navigation.activation.entry.url).pathname;

  // Von der Liste zur Detailseite: Übergangstyp "detail" setzen
  if (fromPath === '/produkte' && toPath.startsWith('/produkte/')) {
    event.viewTransition.types.add('detail');
  }
});

Rückwärtsnavigation im pageswap-Event erkennen

window.addEventListener('pageswap', (event) => {
  const { activation, viewTransition } = event;
  // activation ist null bei Navigation zu einem anderen Ursprung
  if (!activation || !viewTransition) return;

  const { from, entry, navigationType } = activation;
  const zurueck =
    navigationType === 'traverse' && entry.index < from.index;

  viewTransition.types.add(zurueck ? 'rueckwaerts' : 'vorwaerts');
  console.log(`Verlasse ${from.url} (Index ${from.index})`);
});

Verlasse https://example.com/produkte/42 (Index 3)

// Wichtig · Fallstricke

Browser-Unterstützung: Bisher nur in Chromium-Browsern ab Version 123. Firefox und Safari unterstützen das NavigationActivation-Interface derzeit nicht. Prüfe deshalb vorher mit 'navigation' in window && navigation.activation, ob die API verfügbar ist.
Mit null rechnen: Bei Navigationen von einem anderen Ursprung oder beim ersten Aufruf ist from null. Greife daher mit optionaler Verkettung zu: activation?.from?.url.
Im pageswap-Event ist schon event.activation selbst null, wenn das Ziel einen anderen Ursprung hat.
Die Eigenschaft ist schreibgeschützt. Eine Zuweisung wird still ignoriert, im Strict Mode löst sie einen TypeError aus.
Die url des Eintrags kann null sein, wenn die Referrer-Policy des Dokuments die Weitergabe verhindert. Prüfe den Wert, bevor du ihn an new URL() übergibst.

Siehe auch

NavigationActivation.entry NavigationActivation.navigationType Navigation.activation NavigationTransition.from NavigationDestination.url