pushState und replaceState
Aktualisieren Sie die Browser-URL ohne vollständiges Neuladen der Seite
pushState und replaceState ist eine kostenlose HTML Academy-Lektion auf CoddyKit. Dies ist Lektion 1 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.
Die History API
Mit der History API kann eine Seite die in der Adressleiste angezeigte URL ändern, ohne eine vollständige Navigation auszulösen. In Kombination mit clientseitigem Rendering ermöglicht dies Single-Page-Applications, die sich wie native Anwendungen anfühlen, ohne auf als Lesezeichen speicherbare URLs zu verzichten.
pushState
history.pushState(state, "", url) fügt dem Browserverlauf einen neuen Eintrag hinzu. Die URL in der Adressleiste wird sofort aktualisiert, ohne dass eine Netzwerkanfrage gestellt wird. Mit der Zurück-Schaltfläche des Browsers kann der Benutzer zum vorherigen Eintrag navigieren.
history.pushState({ view: "settings" }, "", "/settings");Das state-Argument
Das erste Argument enthält beliebige serialisierbare Daten, die an den Eintrag angehängt werden. Lesen Sie diese später über history.state oder in popstate-Ereignissen aus. Verwenden Sie sie, um den Zustand der Benutzeroberfläche zu übergeben (etwa welcher Tab geöffnet war oder welche Scrollposition verwendet wurde), sodass die exakte Ansicht beim Zurücknavigieren wiederhergestellt werden kann.
Das Argument title
Das zweite Argument ist der Titel des Eintrags. In der Praxis ignorieren alle modernen Browser diesen Wert – setzen Sie document.title = "..." direkt, um den Titel zu ändern. Übergeben Sie üblicherweise eine leere Zeichenfolge; sie hat keine Wirkung.
Das Argument url
Das dritte Argument ist die neue URL. Relative URLs werden relativ zur aktuellen Seite aufgelöst; die neue URL muss vom gleichen Ursprung sein (bei einem anderen Ursprung wird SecurityError ausgelöst). Browser rufen die URL nicht ab – pushState aktualisiert lediglich die Adressleiste und den Verlauf.
replaceState
history.replaceState(state, "", url) ersetzt den aktuellen Verlaufseintrag, anstatt einen neuen hinzuzufügen. Verwenden Sie diese Methode, wenn Sie die URL aktualisieren möchten, ohne einen neuen Schritt für die Zurück-Navigation zu erzeugen, etwa beim Aktualisieren einer Filterabfrage.
// Update query string in place
const url = new URL(location);
url.searchParams.set("filter", "open");
history.replaceState(null, "", url);Anwendungsfälle für pushState
Änderungen von SPA-Routen (beim Klicken auf einen Navigationslink ohne vollständiges Neuladen), das Öffnen eines Modals (damit die Zurück-Schaltfläche das Modal schließt) sowie Schrittwechsel in einem Assistenten. Jeder bedeutungsvolle Zustand sollte einen neuen Verlaufseintrag erhalten, damit die Zurück-Schaltfläche das tut, was Benutzer erwarten.
Anwendungsfälle für replaceState
Aktualisierungen von Filtern, Sortierungen und Seitenzahlen, die den Verlauf nicht unnötig füllen sollen, Weiterleitungen nach dem teilweisen Ausfüllen eines Formulars sowie das Aktualisieren von Tracking-Parametern, ohne navigierbare Einträge zu erzeugen. Beim Zurückgehen überspringt der Benutzer diese „Zwischenzustände“.
Ansicht nach pushState aktualisieren
pushState ändert nur die URL – Ihr Code muss das DOM separat aktualisieren. Das übliche Vorgehen ist: neue Inhalte rendern und anschließend pushState aufrufen. Zusammen erzeugen beide Schritte das SPA-Erlebnis.
function navigate(path) {
renderPage(path);
history.pushState(null, "", path);
window.scrollTo(0, 0);
}Titel und Meta-Aktualisierungen
Aktualisieren Sie document.title und die og:title-Meta-Tags nach einer Navigation, damit das Teilen in sozialen Netzwerken und die Titel der Browser-Tabs die aktuelle Ansicht widerspiegeln. Wenn Sie das vergessen, bleibt bei späteren Freigaben der ursprüngliche Titel erhalten – ein subtiler, aber häufiger SPA-Fehler.
Initiales pushState beim Laden der Seite
Wenn Sie pushState aufrufen, bevor der Benutzer navigiert hat, überschreiben Sie den initialen Eintrag. Um den ersten Eintrag der Seite mit einem Zustand zu versehen, verwenden Sie stattdessen replaceState – dadurch wird der Zustand hinzugefügt, ohne die Tiefe des Verlaufs zu ändern.
Sicherheitsbeschränkung
URLs für pushState müssen vom gleichen Ursprung sein. Der Versuch, mit pushState zu https://evil.com zu navigieren, löst SecurityError aus. Dadurch wird verhindert, dass Seiten die Adressleiste manipulieren und Benutzer glauben lassen, sie befänden sich auf einer anderen Website.
Wissensprüfung
Was macht history.replaceState, das history.pushState nicht macht?
Zusammenfassung
pushState fügt ohne Neuladen der Seite einen neuen Verlaufseintrag hinzu – die Grundlage des SPA-Routings. replaceState aktualisiert den aktuellen Eintrag direkt, wenn nur kosmetische Änderungen an der URL erforderlich sind. Beide Methoden erfordern URLs vom gleichen Ursprung und ignorieren das title-Argument. Aktualisieren Sie das DOM immer separat und denken Sie daran, document.title und die Meta-Tags nach einer Navigation zu aktualisieren.
Häufig gestellte Fragen
Ist die Lektion „pushState und replaceState“ kostenlos?
Ja — der vollständige Text von „pushState und replaceState“ 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 „pushState und replaceState“?
Aktualisieren Sie die Browser-URL ohne vollständiges Neuladen der Seite 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 1 von 4.
Wie lange dauert die Lektion „pushState und replaceState“?
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
- pushState und replaceState
- Das popstate-Ereignis
- Hash-basiertes gegenüber pfadbasiertem Routing
- Die Navigation API in modernen Browsern