Signatur
Beschreibung
Die schreibgeschützte Eigenschaft key der Schnittstelle NavigationDestination liefert den eindeutigen Schlüssel des Verlaufseintrags, zu dem eine Navigation führt. Auf das NavigationDestination-Objekt greifen Sie über NavigateEvent.destination im navigate-Event von window.navigation zu.
Einen Wert hat die Eigenschaft nur, wenn NavigateEvent.navigationType gleich "traverse" ist, also wenn der Benutzer oder der Code mit Zurück/Vorwärts bzw. navigation.traverseTo(), back() oder forward() zu einem bereits vorhandenen Eintrag springt. Bei "push", "replace" und "reload" ist sie ein leerer String, weil das Ziel entweder noch nicht existiert oder, beim Neuladen, kein Wechsel zu einem anderen Eintrag stattfindet.
Der key steht für einen Platz in der Verlaufsliste und nicht für einen bestimmten Eintrag. Bei navigation.navigate(url, { history: "replace" }) bekommt der neue Eintrag eine neue id, behält aber den key. Deshalb eignet sich key für „Springe zurück zu dieser Stelle“ mit navigation.traverseTo(key). Wenn Sie Zustandsdaten an einen konkreten Eintrag binden wollen, nehmen Sie stattdessen id.
Rückgabewert
key des Ziel-NavigationHistoryEntry (vom Browser erzeugt, z. B. im UUID-Format) bei Traverse-Navigationen, sonst ein leerer String "".Beispiele
Schlüssel des Ziels bei Zurück/Vorwärts protokollieren
navigation.addEventListener("navigate", (event) => {
const { navigationType, destination } = event;
if (navigationType === "traverse") {
console.log("Traverse zu Eintrag mit key:", destination.key);
} else {
// bei push/replace/reload immer leer
console.log(`${navigationType}: key = "${destination.key}"`);
}
});Gecachten Seitenzustand beim Zurückspringen wiederherstellen
// Zustand pro Verlaufsplatz (key) zwischenspeichern
const viewCache = new Map();
const renderPage = async (url) => {
const res = await fetch(url);
document.querySelector("main").innerHTML = await res.text();
};
navigation.addEventListener("navigate", (event) => {
if (!event.canIntercept || event.hashChange) return;
// aktuellen Inhalt unter dem key des aktuellen Eintrags ablegen
viewCache.set(navigation.currentEntry.key, document.querySelector("main").innerHTML);
event.intercept({
handler: async () => {
const key = event.destination.key; // nur bei "traverse" gefüllt
if (key && viewCache.has(key)) {
document.querySelector("main").innerHTML = viewCache.get(key);
return;
}
await renderPage(event.destination.url);
},
});
});Prüfen, ob zur Startseite zurückgesprungen wird
// key des ersten Eintrags merken
const homeKey = navigation.entries()[0]?.key;
navigation.addEventListener("navigate", (event) => {
if (event.navigationType === "traverse" && event.destination.key === homeKey) {
console.log("Navigation zurück zum Startpunkt");
}
});
// später z. B. per Button:
// navigation.traverseTo(homeKey);// Wichtig · Fallstricke
- Leerer String statt
null: Außerhalb von"traverse"istkeyimmer"". Prüfen Sie mitif (destination.key)oder vergleichen Sie direktnavigationType. keyoderid:keybleibt bei einer Ersetzung ("replace") erhalten,idändert sich. Für Caches, die an genau einen Eintrag gebunden sind, istidoft die bessere Wahl. Fürnavigation.traverseTo()brauchen Sie dagegenkey.- Die Schlüssel werden vom Browser erzeugt. Verlassen Sie sich nicht auf ihr Format und berechnen Sie sie nicht selbst.
- Browser-Kompatibilität: Die Navigation API gibt es seit Chromium 102 (Chrome, Edge, Opera), in Safari ab 26.2 und in Firefox ab 147. Ältere Browser unterstützen sie nicht. Prüfen Sie deshalb vorher mit
if ("navigation" in window)und nutzen Sie sonst die History API (popstate) als Ersatz. - Die Navigation API arbeitet nur mit gleichem Ursprung (same-origin). Einträge aus anderen Ursprüngen oder aus anderen Frames bekommen Sie nicht zu sehen.