0Pricing
HTML Academy · Lektion

Das popstate-Ereignis

Reagieren Sie auf die Vor- und Zurücknavigation des Browsers

Das popstate-Ereignis ist eine kostenlose HTML Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des HTML Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.

Was popstate macht

Das Ereignis popstate wird auf dem window ausgelöst, wenn der Benutzer im Verlauf navigiert (zurück, vor oder durch einen Aufruf von history.back in JavaScript). Dadurch kann die SPA als Reaktion auf eine vom Browser initiierte Navigation die richtige Ansicht erneut rendern.

Wann es ausgelöst wird

popstate wird beim Klicken auf die Zurück- oder Vor-Schaltfläche sowie bei history.back(), history.forward() und history.go(n) ausgelöst. Es wird NICHT ausgelöst, wenn pushState oder replaceState manuell aufgerufen werden – das sind programmatische Aktualisierungen, über die die Seite bereits Bescheid weiß.

window.addEventListener("popstate", (e) => {
  console.log("Navigated to", location.pathname, "state:", e.state);
  renderPage(location.pathname);
});

Die state-Eigenschaft

Die state-Eigenschaft des Ereignisses enthält das Zustandsobjekt, das Sie für den Eintrag, zu dem navigiert wird, an pushState oder replaceState übergeben haben. Verwenden Sie es, um UI-Zustände wiederherzustellen, die nicht in der URL enthalten sind, etwa den geöffneten Tab oder die Scrollposition.

Die neue URL auslesen

Die Adressleiste ist bereits aktualisiert, wenn popstate ausgelöst wird. Lesen Sie location.pathname, location.search und location.hash aus, um die neue URL zu ermitteln. Zusammen mit dem Zustand enthält dies alle Informationen, die zum Rendern der Zielansicht erforderlich sind.

Initiales Laden der Seite

popstate wird beim initialen Laden der Seite NICHT ausgelöst, sondern nur bei einer Navigation. Rendern Sie die initiale Ansicht beim Start anhand von location und lassen Sie popstate anschließend die weiteren Navigationen behandeln. Andernfalls bleibt die initiale Seite leer, sobald die erste Zurück-Navigation dort ankommt.

// Initial render
renderPage(location.pathname);
// Future navigation
window.addEventListener("popstate", () => renderPage(location.pathname));

hashchange im Vergleich zu popstate

Beim reinen Hash-basierten Routing (URLs wie /#/about) wird das Ereignis hashchange ausgelöst, wenn sich der Hash ändert. popstate wird außerdem bei Änderungen des Pfads ausgelöst. Moderne SPAs verwenden die History API und popstate; Hash-Routing ist veraltet.

Klicks abfangen

Damit ein Klick auf ein reguläres <a> eine clientseitige Navigation auslöst, fangen Sie den Klick ab, rufen Sie preventDefault auf und anschließend pushState + renderPage. Prüfen Sie Zusatztasten (Cmd-/Strg-Klick zum Öffnen eines neuen Tabs) und überlassen Sie solche Klicks dem Standardverhalten.

document.addEventListener("click", (e) => {
  const a = e.target.closest("a");
  if (!a || a.target || e.metaKey || e.ctrlKey) return;
  e.preventDefault();
  history.pushState(null, "", a.href);
  renderPage(location.pathname);
});

Scrollposition wiederherstellen

Browser versuchen bei einer Zurück-Navigation automatisch, die Scrollposition wiederherzustellen. In SPAs ist dies jedoch unzuverlässig, weil Inhalte asynchron gerendert werden. Speichern Sie die Scrollposition im state von pushState und stellen Sie sie in popstate wieder her: window.scrollTo(0, e.state?.scroll ?? 0).

Besonderheit beim asynchronen Rendern

Wenn renderPage Daten asynchron abruft, wird die URL aktualisiert, bevor die Inhalte eintreffen. Zeigen Sie zunächst einen Ladezustand an und rendern Sie anschließend die Inhalte. Vermeiden Sie Race Conditions, bei denen der Benutzer während eines Abrufs zurückgeht und das Ergebnis des abgebrochenen Abrufs die neue Ansicht überschreibt.

Framework-Router

React Router, Vue Router und der Router von SvelteKit kapseln History + popstate. Auch ohne Framework ist das zugrunde liegende Prinzip dasselbe: auf popstate hören, Links abfangen und pushState aufrufen. Wenn der zusätzliche Aufwand eine Rolle spielt, können Sie mit etwa 50 Zeilen Vanilla-JavaScript Ihren eigenen Router schreiben.

Häufige Fehlerquelle: Speicherlecks

Beim Einrichten jeder Ansicht können Ereignis-Listener und Timer registriert werden. Ohne ausdrückliches Aufräumen beim Wechsel der Ansicht (in popstate oder in der pushState-Wrapper-Funktion) sammeln sich die Listener an und beeinträchtigen mit der Zeit die Leistung. Verwalten Sie die Subscriptions pro Ansicht mit einem AbortController und brechen Sie sie beim Ansichtswechsel ab.

Wissensprüfung

Warum wird das popstate-Ereignis NICHT ausgelöst, wenn Sie selbst history.pushState aufrufen?

Zusammenfassung

popstate wird bei der Zurück- oder Vorwärtsnavigation des Browsers ausgelöst und stellt den gespeicherten Zustand sowie die neue location bereit. Bei pushState oder replaceState wird es nicht ausgelöst, weil Ihr Code diese Änderungen bereits kennt; beim initialen Laden der Seite wird es ebenfalls nicht ausgelöst, sodass Sie die Ansicht manuell rendern müssen. Fangen Sie Link-Klicks für die SPA-Navigation ab, speichern Sie die Scrollposition im Zustand und entfernen Sie Listener beim Ansichtswechsel, um Leaks zu verhindern.

Häufig gestellte Fragen

Ist die Lektion „Das popstate-Ereignis“ kostenlos?

Ja — der vollständige Text von „Das popstate-Ereignis“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des HTML Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der HTML Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Das popstate-Ereignis“?

Reagieren Sie auf die Vor- und Zurücknavigation des Browsers Du übst HTML Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um HTML Academy zu starten?

Keine Vorkenntnisse erforderlich. HTML Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.

Wie lange dauert die Lektion „Das popstate-Ereignis“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser HTML Academy-Lektion Code schreiben und ausführen?

Ja. Jede HTML Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. pushState und replaceState
  2. Das popstate-Ereignis
  3. Hash-basiertes gegenüber pfadbasiertem Routing
  4. Die Navigation API in modernen Browsern
← Zurück zu HTML Academy