History.go() — Methode · JavaScript-Referenz

Signatur

History.prototype.go(delta)

Beschreibung

Mit history.go() springt man in der Sitzungshistorie des aktuellen Tabs um eine bestimmte Anzahl von Einträgen vor oder zurück. Ein negativer Wert entspricht mehrfachem Klick auf „Zurück“, ein positiver Wert mehrfachem Klick auf „Vorwärts“. history.go(-1) verhält sich also wie history.back(), history.go(1) wie history.forward().

Wird go() ohne Argument oder mit 0 aufgerufen, lädt der Browser die aktuelle Seite neu – ähnlich wie location.reload(). Liegt der gewünschte Eintrag außerhalb des verfügbaren Bereichs (z. B. go(-10) bei nur drei Einträgen), passiert nichts; es wird kein Fehler geworfen.

Wichtig: Die Navigation erfolgt asynchron. Der Aufruf kehrt sofort zurück, die eigentliche Navigation passiert später. Wer auf den Abschluss reagieren möchte, lauscht bei Einträgen, die per pushState() im selben Dokument angelegt wurden, auf das popstate-Ereignis, bei dokumentübergreifender Navigation auf pageshow/pagehide.

Typische Einsatzgebiete sind Single-Page-Applications mit eigener Routing-Logik, „Zurück“-Schaltflächen in mehrstufigen Formularen (Wizards) oder das gezielte Überspringen mehrerer Zwischenschritte.

Parameter

Name	Typ	Default	Beschreibung
$delta	number	0	Relative Position in der Historie. Negativ = zurück, positiv = vorwärts, `0` bzw. weggelassen = aktuelle Seite neu laden. Nicht-ganzzahlige Werte werden zu einer Ganzzahl konvertiert.

Beispiele

Zurück, vorwärts und neu laden

// Eine Seite zurück (wie der Zurück-Button)
history.go(-1);

// Zwei Seiten vorwärts
history.go(2);

// Aktuelle Seite neu laden
history.go(0);
// oder einfach
history.go();

Wizard: mehrere Schritte auf einmal zurückspringen

// Jeder Wizard-Schritt legt einen eigenen History-Eintrag an
const gotoStep = (step) => {
  history.pushState({ step }, '', `?step=${step}`);
  renderStep(step);
};

const renderStep = (step) => {
  document.querySelector('#wizard').textContent = `Schritt ${step}`;
};

// Zurück zum ersten Schritt, egal wo man gerade ist
document.querySelector('#restart').addEventListener('click', () => {
  const current = history.state?.step ?? 1;
  if (current > 1) history.go(-(current - 1));
});

// Auf die asynchrone Navigation reagieren
window.addEventListener('popstate', (event) => {
  renderStep(event.state?.step ?? 1);
});

Auf das Ende der Navigation warten (Promise-Wrapper)

const goAsync = (delta) =>
  new Promise((resolve) => {
    window.addEventListener('popstate', (e) => resolve(e.state), { once: true });
    history.go(delta);
  });

const main = async () => {
  history.pushState({ page: 'a' }, '', '#a');
  history.pushState({ page: 'b' }, '', '#b');
  const state = await goAsync(-1);
  console.log('Jetzt auf:', state.page);
};

main();

Jetzt auf: a

// Wichtig · Fallstricke

Asynchron: Code direkt nach history.go() läuft noch auf der alten Position – location.href und history.state sind dort noch nicht aktualisiert. Auf popstate warten.
Außerhalb des Bereichs: Ein zu großer delta-Wert wird still ignoriert. Die Länge der Historie liefert history.length, die aktuelle Position ist jedoch nicht direkt auslesbar.
Promise-Wrapper: Verlässt die Navigation das Dokument (z. B. Eintrag einer anderen Seite), feuert kein popstate im alten Dokument – ein darauf wartendes Promise löst dann nie auf.
Kein Zugriff auf fremde URLs: Aus Datenschutzgründen kann man die URLs anderer History-Einträge nicht auslesen, nur dorthin navigieren.
Einschränkungen: In sandboxed iframes oder bei nicht vollständig aktiven Dokumenten kann ein SecurityError geworfen werden. Manche Browser drosseln sehr häufige History-Aufrufe.
Die Navigation API (navigation.traverseTo(), navigation.back()) bietet in Chromium-Browsern eine Promise-basierte Alternative, ist aber noch nicht überall verfügbar.
Browser-Kompatibilität: history.go() wird von allen Browsern seit jeher unterstützt.

Siehe auch

History History.back() History.forward() History.pushState() History.replaceState() History.length Location.reload()