Navigation.canGoBack — Eigenschaft · JavaScript-Referenz

Signatur

get Navigation.prototype.canGoBack

Beschreibung

Die schreibgeschützte Eigenschaft canGoBack des Navigation-Interfaces gibt true zurück, wenn man im Navigationsverlauf zurückgehen kann. Das ist der Fall, wenn der aktuelle Eintrag (navigation.currentEntry) nicht der erste in der Liste navigation.entries() ist, also sein index größer als 0 ist. Andernfalls ist der Wert false.

Gebraucht wird die Eigenschaft vor allem in Single-Page-Anwendungen. Damit lässt sich ein eigener „Zurück“-Button in der Oberfläche nur dann aktivieren, wenn es wirklich einen vorherigen Eintrag gibt. Ruft man navigation.back() ohne vorherigen Eintrag auf, werden die zurückgegebenen Promises mit einer InvalidStateError-DOMException abgelehnt. Eine Prüfung vorher erspart diesen Fehler.

Wichtig: Die Navigation API berücksichtigt nur Verlaufseinträge desselben Ursprungs (Same-Origin) im aktuellen Frame. Kam der Nutzer von einer fremden Website, liefert canGoBack trotzdem false, obwohl der Zurück-Button des Browsers funktionieren würde. Anders als history.length sagt die Eigenschaft also zuverlässig, ob innerhalb der eigenen Anwendung zurücknavigiert werden kann.

Rückgabewert

Typ

boolean

Beschreibung

true, wenn es vor dem aktuellen Eintrag einen gleich-ursprünglichen Verlaufseintrag gibt (currentEntry.index > 0), sonst false. Auch in Dokumenten ohne aktiven Eintrag, etwa bei about:blank im Anfangszustand, ist der Wert false.

Beispiele

Einfache Abfrage

if ('navigation' in window) {
  console.log('Zurück möglich:', navigation.canGoBack);
  console.log('Aktueller Index:', navigation.currentEntry?.index);
}

Zurück möglich: false Aktueller Index: 0

Eigenen Zurück-Button aktivieren oder deaktivieren

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

const updateBackButton = () => {
  backButton.disabled = !navigation.canGoBack;
};

// Nach jedem Wechsel des aktuellen Eintrags neu prüfen
navigation.addEventListener('currententrychange', updateBackButton);
updateBackButton();

backButton.addEventListener('click', async () => {
  if (!navigation.canGoBack) return;
  await navigation.back().finished;
});

Fallback: zur Startseite, wenn kein Zurück möglich ist

const goBackOrHome = async () => {
  if (window.navigation?.canGoBack) {
    await navigation.back().finished;
  } else if (window.navigation) {
    // z. B. bei direktem Einstieg über einen geteilten Link
    await navigation.navigate('/', { history: 'replace' }).finished;
  } else {
    // Browser ohne Navigation API
    location.href = '/';
  }
};

document.querySelector('.dialog-schliessen')
  .addEventListener('click', goBackOrHome);

// Wichtig · Fallstricke

Browser-Kompatibilität: Die Navigation API gibt es in Chromium-Browsern seit Version 102. Safari und Firefox unterstützen sie erst seit Kurzem (Safari 26.2, Firefox 147). Vor der Nutzung sollte man mit 'navigation' in window prüfen, ob sie vorhanden ist, und für ältere Browser einen Fallback über die History API vorsehen.
Nur gleicher Ursprung: Einträge anderer Ursprünge werden nicht mitgezählt. Kam der Nutzer von einer externen Seite, ist canGoBack false, obwohl der Zurück-Button des Browsers funktioniert.
Nicht mit history.length verwechseln: history.length zählt alle Einträge des Tabs, auch fremde und nachfolgende. Die Frage „Kann ich zurück?“ lässt sich damit nicht zuverlässig beantworten.
Momentaufnahme: Der Wert kann sich nach jeder Navigation ändern. Man sollte ihn daher beim Ereignis currententrychange neu auslesen, statt ihn zwischenzuspeichern.
In iframes bezieht sich der Wert nur auf den Verlauf des jeweiligen Frames.

Siehe auch

Navigation.canGoForward Navigation.back() Navigation.currentEntry Navigation.entries() History.back() NavigationActivation.entry