History.forward() — Methode · JavaScript-Referenz

Signatur

History.prototype.forward()

Beschreibung

Die Methode forward() des History-Interfaces bewirkt, dass der Browser im Sitzungsverlauf (Session History) des aktuellen Tabs einen Schritt vorwärts geht. Das Verhalten entspricht exakt einem Klick auf den Vorwärts-Button des Browsers bzw. dem Aufruf history.go(1).

Man verwendet forward() typischerweise in eigenen Navigationsleisten, in Single-Page-Applications (SPA) mit clientseitigem Routing oder in Kiosk- und Web-App-Umgebungen, in denen die Browser-Bedienelemente ausgeblendet sind. Gibt es keinen Folgeeintrag im Verlauf (etwa weil der Nutzer nie zurückgegangen ist), passiert schlicht nichts – es wird kein Fehler geworfen.

Wichtig: Die Methode arbeitet asynchron. Sie gibt sofort undefined zurück, die eigentliche Navigation erfolgt später. Wer auf den Abschluss reagieren möchte, lauscht bei Verlaufseinträgen, die per pushState() erzeugt wurden, auf das popstate-Event; bei echten Seitenwechseln wird dagegen ein neues Dokument geladen (ggf. aus dem Back/Forward-Cache, erkennbar am pageshow-Event mit persisted === true).

Beispiele

Eigener Vorwärts-Button

// HTML: <button id="vor">Vorwärts →</button>
const vorButton = document.querySelector('#vor');

vorButton.addEventListener('click', () => {
  history.forward();
});

Zurück- und Vorwärts-Navigation in einer SPA mit popstate

const render = (state) => {
  document.querySelector('#app').textContent = `Aktuelle Seite: ${state?.seite ?? 'Start'}`;
};

// Verlaufseinträge anlegen
history.pushState({ seite: 'Produkte' }, '', '/produkte');
history.pushState({ seite: 'Warenkorb' }, '', '/warenkorb');

window.addEventListener('popstate', (event) => {
  console.log('Navigiert zu:', event.state?.seite);
  render(event.state);
});

history.back();              // -> Produkte
setTimeout(() => history.forward(), 500); // -> wieder Warenkorb

Navigiert zu: Produkte Navigiert zu: Warenkorb

forward() als Promise kapseln

// Wartet auf das popstate-Event oder bricht nach Timeout ab
const forwardAsync = (timeout = 1000) => new Promise((resolve) => {
  const timer = setTimeout(() => {
    window.removeEventListener('popstate', onPop);
    resolve(false); // kein Folgeeintrag vorhanden
  }, timeout);

  const onPop = () => {
    clearTimeout(timer);
    resolve(true);
  };

  window.addEventListener('popstate', onPop, { once: true });
  history.forward();
});

const navigiert = await forwardAsync();
console.log(navigiert ? 'Vorwärts navigiert' : 'Kein Vorwärts-Eintrag');

Kein Vorwärts-Eintrag

// Wichtig · Fallstricke

Kein Feedback: Es gibt keine Standard-API, um vorab zu prüfen, ob ein Vorwärts-Eintrag existiert. history.length zählt alle Einträge, verrät aber nicht die aktuelle Position. Die neuere Navigation API bietet hierfür navigation.canGoForward und navigation.forward() (mit Promise), ist aber noch nicht in allen Browsern verfügbar.
Asynchronität: Code direkt nach forward() läuft noch auf dem alten Zustand – location.href ist unmittelbar danach noch unverändert.
Kein Fehler bei leerem Verlauf: Existiert kein Folgeeintrag, wird der Aufruf still ignoriert.
iframes: Der Sitzungsverlauf ist gemeinsam für das oberste Browsing-Context; ein forward() in einem iframe kann daher auch den Hauptframe betreffen.
Kompatibilität: Wird von allen Browsern seit jeher unterstützt. Einige Browser ignorieren Verlaufsnavigation ohne vorherige Nutzerinteraktion bzw. überspringen Einträge, die ohne Nutzeraktion angelegt wurden (Schutz vor „History Manipulation“).

Siehe auch

History.back() History.go() History.pushState() History.replaceState() History MediaKeyStatusMap.forEach()