Navigation.entries() — Methode · JavaScript-Referenz

Signatur

Navigation.prototype.entries()

Beschreibung

Die Methode entries() der Schnittstelle Navigation (erreichbar über window.navigation) liefert eine Momentaufnahme des Sitzungsverlaufs als Array von NavigationHistoryEntry-Objekten. Jeder Eintrag enthält u. a. url, key, id, index, sameDocument sowie den per getState() abrufbaren Zustand.

Im Gegensatz zur älteren History-API, die nur history.length und den aktuellen history.state offenlegt, kannst du mit entries() den Verlauf tatsächlich auslesen. Das ist nützlich für eigene „Zurück“-Menüs, Breadcrumbs, Analysen in Single-Page-Anwendungen oder um mit navigation.traverseTo(key) gezielt zu einem früheren Eintrag zu springen.

Wichtig: Das Array enthält nur Einträge mit demselben Ursprung wie das aktuelle Dokument und nur solche aus dem aktuellen Frame (Browsing-Kontext). Einträge fremder Seiten (z. B. die Suchmaschine, von der der Nutzer kam) sind aus Datenschutzgründen nicht enthalten. Die Reihenfolge entspricht der Verlaufsreihenfolge; navigation.currentEntry.index zeigt die aktuelle Position im Array.

Rückgabewert

Typ

NavigationHistoryEntry[]

Beschreibung

Ein neues Array aller gleich-ursprünglichen Verlaufseinträge des aktuellen Frames, geordnet nach ihrer Position im Verlauf. Wenn das Dokument noch nicht vollständig aktiv ist oder eine opake Herkunft hat (z. B. about:blank in bestimmten Kontexten), wird ein leeres Array zurückgegeben.

Beispiele

Alle Verlaufseinträge auflisten

// Prüfen, ob die Navigation API verfügbar ist
if ('navigation' in window) {
  const entries = navigation.entries();
  entries.forEach((entry) => {
    const marker = entry.key === navigation.currentEntry.key ? '→' : ' ';
    console.log(`${marker} [${entry.index}] ${entry.url}`);
  });
} else {
  console.log('Navigation API wird nicht unterstützt');
}

[0] https://example.com/ [1] https://example.com/produkte → [2] https://example.com/produkte/42

Eigenes „Zurück zu …“-Menü mit traverseTo()

const menu = document.querySelector('#verlauf-menu');

const renderMenu = () => {
  menu.replaceChildren();
  const current = navigation.currentEntry.index;
  // Nur Einträge vor der aktuellen Position anzeigen
  navigation.entries()
    .filter((entry) => entry.index < current)
    .reverse()
    .forEach((entry) => {
      const button = document.createElement('button');
      button.textContent = new URL(entry.url).pathname;
      button.addEventListener('click', () => {
        navigation.traverseTo(entry.key);
      });
      menu.append(button);
    });
};

renderMenu();
// Menü nach jedem Eintragswechsel aktualisieren
navigation.addEventListener('currententrychange', renderMenu);

Gespeicherten Zustand früherer Einträge auswerten

// Zustand beim Navigieren mitgeben
await navigation.navigate('/suche?q=js', {
  state: { scrollY: 0, filter: 'neu' }
}).finished;

// Später: alle Suchen mit Filter aus dem Verlauf holen
const suchen = navigation.entries()
  .filter((entry) => new URL(entry.url).pathname === '/suche')
  .map((entry) => ({
    url: entry.url,
    state: entry.getState()
  }));

console.log(suchen);

[{ url: 'https://example.com/suche?q=js', state: { scrollY: 0, filter: 'neu' } }]

// Wichtig · Fallstricke

Browser-Unterstützung: Die Navigation API gibt es in Chromium-Browsern seit Version 102; Firefox (147) und Safari (26.2) haben sie erst viel später eingeführt. Für ältere Browser immer per 'navigation' in window prüfen und auf die History-API zurückfallen.
Nur gleicher Ursprung: Einträge anderer Origins sowie aus anderen Frames fehlen. navigation.entries().length kann daher kleiner sein als history.length.
Momentaufnahme: Das zurückgegebene Array wird bei Verlaufsänderungen nicht aktualisiert. Nach Navigationen erneut entries() aufrufen (z. B. im Event currententrychange).
Entfernte Einträge (etwa nach einer neuen Navigation von einer früheren Position aus) lösen am jeweiligen NavigationHistoryEntry das Event dispose aus.
Für Sprünge zu einem Eintrag lieber key statt index verwenden – key bleibt bei replace-Navigationen stabil.

Siehe auch

Navigation Navigation.navigate() History Navigation.back() Navigation.forward()