Browser-History mit dem HTML5-History-API bearbeiten
Kommentare

HTML5 hat als Web-Standard die Arbeit für viele Webentwickler stark vereinfacht, etwa im Umgang mit Medien-Content. Doch auch was die Kontrolle über die Browser-History angeht, bietet HTML5 neue Möglichkeiten

HTML5 hat als Web-Standard die Arbeit für viele Webentwickler stark vereinfacht, etwa im Umgang mit Medien-Content. Doch auch was die Kontrolle über die Browser-History angeht, bietet HTML5 neue Möglichkeiten für Entwickler. Während in älteren HTML-Versionen Webentwickler kaum Kontrolle über die Browser-History hatten, gibt es durch das HTML5-History-API die Option, Einträge in die History hinzuzufügen oder die URL in der Adressleiste zu verändern, ohne die aktuelle Seite neu zu laden. Avinash Zala erklärt, wie das HTML5-History-API funktioniert.

Browser-History mit HTML5-History-API ohne Hashfunktion ändern

Das HTML5-History-API soll Entwicklern vor allem die Möglichkeit geben, Single-Page-Applikationen mit umfangreichen Skripts zu entwickeln, die keine Hashfunktionen benutzen. Hashfunktionen wurden in der Vergangenheit oft genutzt, um Content zu verändern, weil das Ändern der URL nicht ohne einen Refresh der Seite möglich war. Zudem führte das Ändern der Hashfunktion für eine URL zu keiner Veränderung der Browser-History.

Um die Browser-History zu manipulieren, stellt HTML5 zwei verschiedene Methoden zur Verfügung. Einerseits lässt sich mit pushState ein neuer Eintrag zur History hinzufügen, andererseits kann mit replaceState das aktuelle History-Value ersetzt werden. Dafür erwarten beide Events die gleiche Anzahl an Parametern.

Gleichzeitig gibt es auch das popstate-Event, mit dem Probleme beim Navigieren mit den Vorwärts- und Rückwärts-Buttons des Browsers verhindert werden sollen, etwa wenn sich falsche History-Einträge im Browser angesammelt haben.

Das HTML5-History-API kann Entwicklern die Arbeit im Umgang mit der Browser-History vereinfachen. In seinem Tutorial erklärt Avinash Zala ausführlicher und mit Code-Beispielen, wie sich eine Single-Page-Applikation mit dem History-API entwickeln lässt, zudem gibt es dort auch Demos für pushState– und replaceState-Events. 

Aufmacherbild: History von Shutterstock / Urheberrecht: Pixelbliss

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -