Navigation.canGoForward — Eigenschaft · JavaScript-Referenz

Signatur

get Navigation.canGoForward

Beschreibung

Die Eigenschaft navigation.canGoForward der Navigation API gibt an, ob der aktuelle Verlaufseintrag (navigation.currentEntry) nicht der letzte Eintrag in navigation.entries() ist. Ist das der Fall, führt ein Aufruf von navigation.forward() zu einem gültigen Ziel, und die Eigenschaft ist true.

Typischerweise nutzt man sie, um in Single-Page-Anwendungen eigene „Vorwärts“-Schaltflächen ein- oder auszublenden bzw. zu deaktivieren. So werden Aufrufe von navigation.forward() vermieden, die sonst mit einem InvalidStateError fehlschlagen würden.

Wichtig: Die Navigation API sieht nur Verlaufseinträge desselben Ursprungs (same-origin) im aktuellen Frame. Folgen nach dem aktuellen Eintrag nur Einträge eines anderen Ursprungs, liefert canGoForward trotzdem false, auch wenn der Vorwärts-Knopf des Browsers aktiv ist. Der Wert ist außerdem eine Momentaufnahme – nach jeder Navigation muss er neu gelesen werden, etwa im currententrychange-Event.

Rückgabewert

Typ

boolean

Beschreibung

true, wenn vorwärts navigiert werden kann (der aktuelle Eintrag ist nicht der letzte in navigation.entries()), sonst false.

Beispiele

Sicher vorwärts navigieren

const goForward = async () => {
  if (!navigation.canGoForward) {
    console.log('Kein Vorwärts-Eintrag vorhanden');
    return;
  }
  // committed: Promise, sobald die URL gewechselt hat
  await navigation.forward().committed;
  console.log('Neue URL:', navigation.currentEntry.url);
};

goForward();

Kein Vorwärts-Eintrag vorhanden

Vor/Zurück-Buttons einer SPA aktuell halten

const backBtn = document.querySelector('#back');
const fwdBtn = document.querySelector('#forward');

const updateButtons = () => {
  backBtn.disabled = !navigation.canGoBack;
  fwdBtn.disabled = !navigation.canGoForward;
};

backBtn.addEventListener('click', () => navigation.back());
fwdBtn.addEventListener('click', () => navigation.forward());

// Nach jeder Navigation neu bewerten
navigation.addEventListener('currententrychange', updateButtons);
updateButtons();

Mit Feature-Erkennung und Fallback

const canGoForward = () => {
  if ('navigation' in window) {
    return navigation.canGoForward;
  }
  // Die History API kennt keine Entsprechung – Zustand unbekannt
  return null;
};

console.log(canGoForward());

false (bzw. null ohne Navigation API)

Zusammenhang mit entries() nachvollziehen

const entries = navigation.entries();
const index = navigation.currentEntry.index;
const manuell = index < entries.length - 1;

console.log(manuell === navigation.canGoForward);

true

// Wichtig · Fallstricke

Browser-Kompatibilität: Die Navigation API ist in Chromium-Browsern (Chrome, Edge, Opera) seit Version 102 verfügbar und inzwischen auch in aktuellen Firefox- und Safari-Versionen angekommen. In älteren Browsern immer per 'navigation' in window prüfen.
Nur same-origin: Einträge anderer Ursprünge werden nicht berücksichtigt; canGoForward kann daher false sein, obwohl der Browser-Vorwärts-Knopf aktiv ist.
Nach einer neuen push-Navigation (z. B. Linkklick oder navigation.navigate()) werden alle Vorwärts-Einträge verworfen – der Wert wird dann false.
Ist das Dokument nicht vollständig aktiv (z. B. ein entferntes iframe) oder ist currentEntry null (etwa bei about:blank-Initialdokumenten), liefert die Eigenschaft false.
Die Eigenschaft ist schreibgeschützt; eine Zuweisung wird ignoriert (im Strict Mode TypeError).
Die ältere History API (history.length) bietet keine zuverlässige Entsprechung, weil sie die aktuelle Position nicht offenlegt.

Siehe auch

Navigation.canGoBack Navigation.forward() Navigation.back() Navigation.entries() Navigation.currentEntry Navigation History.forward()