NavigateEvent.info — Eigenschaft · JavaScript-Referenz

Signatur

NavigateEvent.info

Beschreibung

NavigateEvent.info enthält einen beliebigen JavaScript-Wert, den der Aufrufer über die Option info an eine Navigationsmethode der Navigation API übergeben hat – etwa an navigation.navigate(), navigation.reload(), navigation.traverseTo(), navigation.back() oder navigation.forward(). Wurde kein info übergeben oder löst der Browser die Navigation selbst aus (Linkklick, Formular, Zurück-Button), ist der Wert undefined.

Der Wert gilt nur für diese eine Navigation. Im Gegensatz zu state wird er nicht im Verlaufseintrag gespeichert und steht bei späteren Besuchen desselben Eintrags nicht mehr zur Verfügung. Deshalb eignet er sich gut für flüchtige Zusatzinformationen, zum Beispiel die Richtung einer Übergangsanimation, die Quelle der Navigation (etwa „Karussell“ oder „Suche“) oder ein Flag, das das Scrollen nach oben unterdrückt.

Ausgelesen wird der Wert typischerweise im navigate-Ereignishandler von window.navigation, meistens zusammen mit event.intercept(), damit eine Single-Page-Anwendung die Navigation selbst behandelt und dabei auf info reagieren kann.

Rückgabewert

Typ

any

Beschreibung

Den beim Auslösen übergebenen info-Wert, unverändert und ohne Kopie (die Objektreferenz bleibt gleich). Ohne übergebenes info ist der Wert undefined.

Beispiele

info übergeben und im navigate-Handler auslesen

navigation.addEventListener('navigate', (event) => {
  console.log('info:', event.info);
});

// Navigation mit Zusatzinformation starten
navigation.navigate('/produkte/42', { info: { quelle: 'suche' } });

info: { quelle: 'suche' }

Richtung einer Übergangsanimation steuern

const zeigeSeite = async (url, richtung) => {
  const main = document.querySelector('main');
  main.dataset.animation = richtung ?? 'fade';
  const html = await (await fetch(url)).text();
  main.innerHTML = html; // nur vertrauenswürdige Inhalte einsetzen!
};

navigation.addEventListener('navigate', (event) => {
  if (!event.canIntercept || event.hashChange || event.downloadRequest) return;
  const url = new URL(event.destination.url);
  event.intercept({
    handler: () => zeigeSeite(url.pathname, event.info?.richtung)
  });
});

// Im Bildkarussell:
document.querySelector('#weiter').addEventListener('click', () => {
  navigation.navigate('/galerie/3', { info: { richtung: 'links' } });
});
document.querySelector('#zurueck').addEventListener('click', () => {
  navigation.back({ info: { richtung: 'rechts' } });
});

Unterschied zwischen info und state

navigation.addEventListener('navigate', (event) => {
  if (!event.canIntercept) return;
  event.intercept({
    handler: async () => {
      console.log('info:', event.info);
      console.log('state:', navigation.currentEntry.getState());
    }
  });
});

await navigation.navigate('/profil', {
  state: { tab: 'einstellungen' },
  info: { einmalig: true }
}).finished;

// Später per Zurück/Vor wieder zu /profil: info ist weg, state bleibt
await navigation.back().finished;
await navigation.forward().finished;

info: { einmalig: true } state: { tab: 'einstellungen' } info: undefined state: { tab: 'einstellungen' } info: undefined state: { tab: 'einstellungen' }

// Wichtig · Fallstricke

Browser-Unterstützung: Die Navigation API gibt es in Chromium-Browsern seit Version 102. Firefox (147+) und Safari (26.2+) unterstützen sie erst seit Kurzem. Prüfe die Unterstützung vorher mit 'navigation' in window und plane eine Ausweichlösung über die History API ein.
info ist bei Navigationen, die der Browser oder der Nutzer auslöst (Linkklick, Adressleiste, Zurück-Button des Browsers, Formularversand), immer undefined. Greife deshalb defensiv zu, z. B. mit event.info?.richtung.
Der Wert wird nicht serialisiert und nicht im Verlauf gespeichert. Er darf auch nicht serialisierbare Werte enthalten, etwa Funktionen oder DOM-Knoten, überdauert aber keinen Neuladen der Seite und keinen späteren Wechsel zwischen Verlaufseinträgen. Für dauerhafte Daten ist state gedacht.
Wird eine Navigation abgebrochen oder durch eine neue ersetzt, verfällt ihr info-Wert. Er wird nicht an die Folgenavigation weitergegeben.
Die Eigenschaft ist nur lesbar. Eine Zuweisung hat keine Wirkung und wirft im Strict Mode einen TypeError.

Siehe auch

Navigation.navigate() Navigation.back() NavigateEvent.signal NavigateEvent.destination NavigateEvent.formData