Signatur
Beschreibung
Die schreibgeschützte Eigenschaft url eines NavigationHistoryEntry-Objekts enthält die vollständige, absolute URL des Verlaufseintrags, also mit Protokoll, Host, Pfad, Query-String und Fragment, z. B. "https://example.com/produkte?seite=2#details". Die Einträge bekommst du über navigation.currentEntry, navigation.entries() oder über Navigationsereignisse wie currententrychange.
Gebraucht wird die Eigenschaft vor allem in Single-Page-Anwendungen: Du kannst den Verlauf der aktuellen Sitzung auswerten, z. B. für Breadcrumbs, einen eigenen „Zurück zu …“-Button oder für Analysezwecke. Außerdem lässt sich damit prüfen, ob ein bestimmter Eintrag schon im Verlauf liegt, bevor man mit navigation.traverseTo(entry.key) dorthin springt, statt eine neue Navigation zu starten.
Anders als bei der alten History-API kommst du hier auch an die URLs anderer Einträge. Das gilt aber nur für Einträge derselben Origin im aktuellen Frame. Einträge anderer Origins liefert navigation.entries() gar nicht erst.
Rückgabewert
null, wenn der Eintrag zu einem anderen Dokument gehört und dieses Dokument mit einer Referrer-Policy wie no-referrer oder origin ausgeliefert wurde. In diesem Fall wird die URL aus Datenschutzgründen nicht offengelegt.Beispiele
URL des aktuellen Eintrags auslesen
// Vorher prüfen, ob der Browser die Navigation API kennt
if ('navigation' in window) {
const url = navigation.currentEntry.url;
console.log(url);
// Mit dem URL-Konstruktor in Bestandteile zerlegen
const { pathname, searchParams } = new URL(url);
console.log(pathname, searchParams.get('seite'));
} else {
console.log('Navigation API nicht verfügbar:', location.href);
}Verlauf der Sitzung als Breadcrumb-Liste ausgeben
const renderBreadcrumbs = () => {
const liste = document.querySelector('#verlauf');
liste.replaceChildren();
for (const entry of navigation.entries()) {
const li = document.createElement('li');
// url kann null sein, dafür einen Ersatztext verwenden
li.textContent = entry.url ? new URL(entry.url).pathname : '(verborgen)';
if (entry.key === navigation.currentEntry.key) li.classList.add('aktiv');
li.addEventListener('click', () => navigation.traverseTo(entry.key));
liste.append(li);
}
};
renderBreadcrumbs();
navigation.addEventListener('currententrychange', renderBreadcrumbs);Zu einem vorhandenen Eintrag zurückspringen statt neu navigieren
const geheZu = async (zielPfad) => {
const ziel = new URL(zielPfad, location.href).href;
// Eintrag mit passender URL suchen (neueste zuerst)
const vorhanden = navigation.entries()
.toReversed()
.find((entry) => entry.url === ziel);
if (vorhanden) {
await navigation.traverseTo(vorhanden.key).finished;
} else {
await navigation.navigate(ziel).finished;
}
console.log('Jetzt bei:', navigation.currentEntry.url);
};
geheZu('/warenkorb');// Wichtig · Fallstricke
- Browserunterstützung: Die Navigation API gibt es in Chromium-Browsern (Chrome, Edge, Opera) seit Version 102. Firefox und Safari unterstützen sie erst in sehr neuen Versionen. Prüfe deshalb vorher mit
'navigation' in windowund greife bei Bedarf auflocation.hrefbzw. dieHistory-API zurück. nullabfangen: Bei Einträgen anderer Dokumente mit strengerReferrer-Policyisturlgleichnull.new URL(entry.url)wirft in diesem Fall einenTypeError.- Vergleiche immer mit absoluten URLs:
urlist immer absolut. Wandle relative Pfade vor einem Vergleich mitnew URL(pfad, location.href).hrefum. Achte auch auf Unterschiede bei Fragment, abschließendem Schrägstrich und Reihenfolge der Query-Parameter. - Die Eigenschaft ist schreibgeschützt. Eine Zuweisung hat keine Wirkung. Um die URL zu ändern, nimm
navigation.navigate(url, { history: 'replace' }). - Die URL eines Eintrags kann sensible Daten enthalten, etwa Tokens im Query-String. Gib sie nicht ungefiltert an Analyse-Dienste weiter.