History.back() — Methode · JavaScript-Referenz

Signatur

History.prototype.back()

Beschreibung

history.back() navigiert einen Schritt zurück in der Sitzungshistorie des aktuellen Browsing-Kontexts (Tab oder Frame). Der Aufruf entspricht exakt history.go(-1) und hat dieselbe Wirkung wie ein Klick auf die Zurück-Schaltfläche des Browsers.

Die Methode arbeitet asynchron: Sie kehrt sofort zurück, die eigentliche Navigation passiert danach. Wer auf das Ergebnis reagieren will, lauscht auf das Ereignis popstate (bei Einträgen, die per history.pushState() im selben Dokument entstanden sind) bzw. auf pagehide/pageshow, wenn tatsächlich ein anderes Dokument geladen wird.

Typische Einsatzfälle sind eigene „Zurück“-Schaltflächen in Single-Page-Anwendungen, das Schließen von Modaldialogen, die zuvor einen Historien-Eintrag erzeugt haben, oder mehrstufige Formulare. Gibt es keinen vorherigen Eintrag, passiert schlicht nichts – es wird kein Fehler geworfen.

Beispiele

Eigene Zurück-Schaltfläche

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

backButton.addEventListener('click', () => {
  // Entspricht dem Zurück-Button des Browsers
  history.back();
});

Auf die Navigation in einer SPA reagieren

window.addEventListener('popstate', (event) => {
  console.log('Zurück zu:', location.pathname, 'State:', event.state);
});

history.pushState({ seite: 'details' }, '', '/details');

// Asynchron: popstate feuert erst nach dem Aufruf
history.back();
console.log('back() aufgerufen');

back() aufgerufen Zurück zu: / State: null

Modaldialog per Zurück-Taste schließen

const dialog = document.querySelector('dialog');

const openDialog = () => {
  dialog.showModal();
  // Eintrag anlegen, damit die Zurück-Taste den Dialog schließt
  history.pushState({ modal: true }, '');
};

const closeDialog = () => {
  if (history.state?.modal) {
    history.back(); // entfernt den Modal-Eintrag, löst popstate aus
  }
};

window.addEventListener('popstate', () => {
  if (dialog.open) dialog.close();
});

document.querySelector('#oeffnen').addEventListener('click', openDialog);
dialog.querySelector('.schliessen').addEventListener('click', closeDialog);

Fallback, wenn es keinen vorherigen Eintrag gibt

const goBackOr = (fallbackUrl) => {
  // history.length > 1 ist nur ein grober Hinweis
  const kamVonEigenerSeite = document.referrer.startsWith(location.origin);
  if (history.length > 1 && kamVonEigenerSeite) {
    history.back();
  } else {
    location.assign(fallbackUrl);
  }
};

document.querySelector('#zurueck').addEventListener('click', () => goBackOr('/'));

// Wichtig · Fallstricke

Asynchron: Code direkt nach history.back() läuft noch auf dem alten Zustand. Wer auf das Ergebnis angewiesen ist, sollte auf popstate warten.
Kein Fehler ohne Vorgänger: Gibt es keinen vorherigen Eintrag (z. B. neuer Tab, direkter Link), passiert nichts. Mit history.length lässt sich das nur grob prüfen, weil die Zahl auch Einträge vor und nach der aktuellen Position umfasst und die aktuelle Position nicht verrät.
Kann die Website verlassen: Stammt der vorherige Eintrag von einer fremden Seite, führt back() dorthin. Für In-App-Navigation daher ggf. mit Fallback-URL arbeiten.
Nutzeraktivierung: Manche Browser (z. B. Chrome) überspringen beim Zurückgehen Einträge, die ohne Nutzerinteraktion per pushState angelegt wurden („History Manipulation Intervention“), um Zurück-Fallen zu verhindern.
Frames: In einem <iframe> wirkt der Aufruf auf die gemeinsame Sitzungshistorie der obersten Ebene; es kann also auch die Hauptseite zurücknavigieren.
bfcache: Beim Zurückkehren zu einem anderen Dokument wird die Seite evtl. aus dem Back-Forward-Cache wiederhergestellt – dann feuert kein load, sondern pageshow mit event.persisted === true.
Wirft SecurityError, wenn das zugehörige Dokument nicht vollständig aktiv ist.
Unterstützt von allen Browsern seit jeher; für moderne SPAs lohnt ein Blick auf die neuere Navigation API (navigation.back(), noch nicht in allen Browsern).

Siehe auch

History.forward() History.go() History.pushState() History.replaceState() History.length History