NavigationHistoryEntry.index — Eigenschaft · JavaScript-Referenz

Signatur

get NavigationHistoryEntry.index

Beschreibung

Die schreibgeschützte Eigenschaft index eines NavigationHistoryEntry-Objekts gibt an, an welcher Stelle der Eintrag in der Verlaufsliste des aktuellen Dokuments steht. Das ist genau die Liste, die navigation.entries() zurückgibt. Der erste Eintrag hat den Index 0.

Nützlich ist index vor allem in Single-Page-Anwendungen: Wenn du den Index von navigation.currentEntry mit dem Index des Ziels einer Navigation vergleichst, weißt du, ob der Nutzer vor- oder zurückgeht. So kannst du zum Beispiel die Richtung einer Übergangsanimation festlegen. Außerdem lassen sich damit Brotkrumen-Navigationen oder eigene „Zurück“-Knöpfe bauen.

Der Wert -1 bedeutet, dass der Eintrag nicht mehr zur Verlaufsliste gehört. Das passiert etwa, wenn er durch navigation.navigate(url, { history: "replace" }) ersetzt wurde oder beim Aufruf einer neuen Seite aus dem Vorwärtsverlauf entfernt wurde. In diesem Fall wird am Eintrag auch das Ereignis dispose ausgelöst.

Rückgabewert

Typ

number

Beschreibung

Ganzzahliger, bei 0 beginnender Index des Eintrags in navigation.entries() oder -1, wenn der Eintrag nicht mehr in der Liste steht.

Beispiele

Position des aktuellen Eintrags ermitteln

if ('navigation' in window) {
  const current = navigation.currentEntry;
  const total = navigation.entries().length;
  console.log(`Eintrag ${current.index + 1} von ${total}`);
}

Eintrag 3 von 5

Richtung einer Navigation für Animationen bestimmen

navigation.addEventListener('navigate', (event) => {
  if (event.navigationType !== 'traverse') return;

  const fromIndex = navigation.currentEntry.index;
  const toIndex = event.destination.index; // bei traverse gesetzt, sonst -1
  const direction = toIndex < fromIndex ? 'zurueck' : 'vor';

  document.documentElement.dataset.navDirection = direction;
  console.log(`Navigation ${direction}: ${fromIndex} -> ${toIndex}`);
});

Navigation zurueck: 3 -> 2

Ersetzten Eintrag erkennen (index === -1)

const oldEntry = navigation.currentEntry;

oldEntry.addEventListener('dispose', () => {
  console.log('Eintrag entfernt, index =', oldEntry.index);
});

await navigation.navigate('/profil', { history: 'replace' }).committed;
console.log('Neuer Index:', navigation.currentEntry.index);

Eintrag entfernt, index = -1 Neuer Index: 2

Eigener Zurück-Knopf nur bei vorhandenem Verlauf

const backButton = document.querySelector('#zurueck');

const updateButton = () => {
  backButton.disabled = navigation.currentEntry.index <= 0;
};

navigation.addEventListener('currententrychange', updateButton);
backButton.addEventListener('click', () => navigation.back());
updateButton();

// Wichtig · Fallstricke

Browser-Kompatibilität: Die Navigation API wurde lange nur von Chromium-Browsern (Chrome/Edge ab 102) unterstützt. Firefox und Safari sind erst in neuen Versionen dazugekommen. Prüfe deshalb mit 'navigation' in window und nutze als Rückfall die History API.
index bezieht sich nur auf Einträge mit gleichem Ursprung im aktuellen Browsing-Kontext. Er muss nicht mit history.length übereinstimmen, weil fremde Einträge (andere Origins) in navigation.entries() fehlen.
Bei event.destination im navigate-Ereignis hat index nur bei navigationType === "traverse" einen gültigen Wert. Bei push, replace und reload ist er -1.
Der Wert kann sich ändern. Einträge können entfernt werden (Wert dann -1), deshalb solltest du index nicht dauerhaft zwischenspeichern. Für eine stabile Kennung nimm key oder id.
In Dokumenten, die nicht vollständig aktiv sind (z. B. getrennte iframes), gibt die Eigenschaft -1 zurück.

Siehe auch

Navigation.entries() NavigationHistoryEntry.id NavigationHistoryEntry.key NavigationHistoryEntry.url NavigationHistoryEntry.sameDocument