Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

HTML5 History API – Dynamische Webseiten mit erweiterter Browserfunktionalität

Stark und strahlend, das ist HTML5 laut Logo.

Viele dynamische Webapplikationen haben nach wie vor ein Problem im Umgang mit nativen Browserfunktionen. Fatalstes Beispiel, das die Usability sehr stark einschränken kann, ist dabei die History, bzw. die Vor- und Zurück-Buttons. HTML5, der kommende Standard für Webentwickler, soll genau an diesem Punkt mit der History API Abhilfe schaffen.

Manipulation der Adresszeile

Durch die HTML5 History-API kann man die Browserhistorie praktisch manipulieren. Die History des Browsers besteht aus einem Stack, der mit Hilfe der HTML5 History API ein Eintrag hinzugefügt werden kann. In diese History wird stets die zuletzt aufgerufene Adresse übernommen, bzw. die letzte URL, die in der Adresszeile des Browsers steht.

Das bedeutet für den praktischen Einsatz: Wenn man in einem dynamisch nachgeladenen Element auf einen Link zu einer anderen Seite im selben Fenster drückt, wird das nachgeladene Element beim Klicken auf den Zurück-Button des Browsers nicht mehr angezeigt, da ja nur die ursprüngliche URL vom Browser aus der History aufgerufen werden kann.

Mit Hilfe der HTML5-History-API kann durch den Befehl

history.pushState(data, title, url)

die History durch die Simulation einer URL in der Browserzeile die History manipuliert werden.

  • „data“ kann standardmäßig „null“ gesetzt werden, kann aber für Informationen in der Session-History oder für JSON-Objekte genutzt werden
  • „title“ ist einfach ein Titel, der in der History angezeigt wird
  • „url“ ist die URL die aufgerufen werden soll

Das Prinzip dahinter: Beim Aufrufen des Scripts „feuert“ die API eine neue URL an die Adresszeile des Browsers, ohne dass diese aufgerufen wird. Gleichzeitig wird dazu ein neuer Eintrag in der Browser-History geschaffen. Das bedeutet beim Aufrufen einer neuen Seite und nach dem Klicken auf den Zurück-Button wird eine URL aufgerufen. Zum Beispiel in dieser Form:

http://www.example.com/index.php?seite=about

Die Informationen können dann über die GET-Variablen ausgelesen und die nötigen Informationen automatisch nachgeladen werden.

Einträge in der History ersetzen

Eine weitere Möglichkeit:

replaceState(data, title, url)

Für die Attribute gelten dieselben Eigenschaften wie bei pushState. Nur ersetzt replaceState den letzten Eintrag in der History und schreibt keine neue URL in die Adresszeile des Browsers. Das kann man zum Beispiel nutzen, wenn man innerhalb einer Seite navigiert, kann man die zuletzt aufgerufene Seite in die History eintragen.

Pro und Contra

Nachteile an dieser Technik: Ich muss nun meine Seite neu konzipieren, weil natürlich meine Seiten auf die URL-Einträge reagieren müssen. Für dieses Problem wurde aber mit der Bibliothek history.js eine gute Lösung gefunden. Und man kann leider auch viele Dinge damit anstellen, die nicht unbedingt im Sinne des Erfinders waren, zum Beispiel in der History unliebsame URLs eintragen oder viele andere Dinge. Ein Beispiel findet ihr unten in den Links. Man sollte also sehr sensibel mit den Daten in der Browserhistory umgehen, um den User nicht zu verärgern oder zu vertreiben. Ich würde mir daher gerne Einschränkungen wünschen, dass zum Beispiel nur relative URLs eingetragen werden können.

Wo liegt denn nun der tatsächliche Vorteil der HTML5-History API? An mehreren Punkten: Zum Beispiel in Punkten der Suchmaschinenoptimierung. Zum Aufrufen der Seiten müssen ja Unterstützungen für die neuen URLs geschaffen werden, die natürlich dann auch von den Suchmaschinen durchsucht werden! Dadurch könnt ihr gewährleisten, dass euer gesamter Inhalt erfasst wird. Natürlich verbessert ihr auch die Usability und schafft eine Form von Permalinks, mit denen eure Besucher eure Seiten an andere leichter weitergeben können und sich sicher sein können, dass die Informationen auch gefunden werden.

Weiterführende Links:

Bitte beachte unsere Community-Richtlinien

Eine Reaktion
Markus Weigelt

Tolle Sache mit dieser HTML5 History API, werde ich mal bei Gelegenheit ausprobieren.
Bisher verwende ich das "AJAX crawling scheme" (http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=174992) mit dem es möglich ist, trotz dynamischen Nachladens die Seite Crawler konform zu halten. So kann dieser auch auf den dynamischen Inhalt erfassen.

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.