Hallo zusammen, vor einiger Zeit hatte ich die „history.pushState()“ Methode angesprochen und möchte dieser nun endlich einen Eintrag widmen! Dabei handelt es sich um eine Methode der HTML5 History API… Diese wird bereits von vielen Webseiten bzw. Entwicklern verwendet (u.a. Youtube) und verwischt die Grenze zwischen HTTP und Ajax Requests!

Eine Sache gleich zu beginn!

Wie es bei den modernen (HTML5) APIs so ist, arbeiten die verschiedenen Browser nicht auf die gleiche Art und weise. Soll heißen, einige unterstützen z.B. einen Parameter nicht, während andere Browser die Events anders triggern und so weiter… Es gibt zwar Bibliotheken (wie z.B. history.js) die versuchen diese API in allen Browsern gleich zu steuern, doch darauf möchte ich Heute nicht weiter eingehen.

Wofür brauchen wir history.pushState()?

Stellen wir uns folgende Situation vor: Ihr baut eine Web-Applikation, deren Inhalte per Ajax nachgeladen werden – zum Beispiel beim navigieren durch verschiedene Bereiche. Das Problem: durch die Ajax Requests wird die URL nicht angepasst! Das hat zur Folge das ihr, wenn ihr durch die Applikation navigiert und die Seite aktualisiert, unverzüglich am ursprünglichen Ausgangspunkt landet (zumindest sofern ihr nicht mit Hilfe von Sessions die „aktuelle Seite“ speichert).
Und um genau das zu verhindern kommt hier die „pushState()“ Methode ins Spiel!

Was macht die Methode genau?

Diese Methode ermöglicht euch das anpassen der URL und ablegen von Daten (in Form eines JSON Objekts), ohne einen HTTP Request zu triggern. Gleichzeitig wird die vorherige URL in die History geschrieben, dadurch lässt sich im Nachgang mit Hilfe der „vor“ und „zurück“ Buttons des Browsers navigieren!

// "Prototype" Syntax...

new Ajax.Request('pages/about-me', {
   onSuccess: function (response) {
      // Once the data has been loaded, we can "update" the URL.
      history.pushState(
         {current_page:"page/about-me", previous_page:window.location.pathname},
         'Page: About me',
         '/page/about-me');

      // Syntax: history.pushState(<object>, <title>[, <url>]);
   }
});

// Listening to the "popstate" event:
Event.observe(window, 'popstate', function (ev) {
   console.log(ev);
});

Dieser Quelltext würde nach dem Laden von „pages/about-me“ die URL entsprechend umstellen und einen Eintrag in die History vornehmen. Das „popstate“ Event wird aufgerufen, sobald der aktuelle History Eintrag mit einem anderen ausgetauscht wird (also z.B. durch die „zurück“ oder „vor“ Buttons) – Der Parameter „ev“ ist eine Instanz von „PopStateEvent“ und könnte folgendermaßen aussehen:

{
  state: {
    current_page: "page/about-me",
    previous_page: "page/home"
  },
  clipboardData: undefined,
  cancelBubble: false,
  returnValue: true,
  srcElement: Window,
  timeStamp: 1393026528698,
  type: "popstate",
  // ...
}

Übrigens: Das Objekt des zurzeit aktiven History Eintrags lässt sich mit history.state; auslesen.

Fazit der HTML5 History API

Obwohl selbst einige moderne Browser noch kleine Probleme mit der History API haben (von alten Browsern möchte ich gar nicht erst anfangen 😉 ) kommt diese Technik schon auf vielen Seiten zum Einsatz! Bibliotheken wie die eingangs erwähnte history.js helfen die Probleme zu verringern.
Ich selbst finde diese Technik wahnsinnig interessant und bin mir sicher das bereits in naher Zukunft viele Seiten darauf setzen werden!

Mehr zum Thema findet ihr hier:

• MDN Mozilla Developer Network
• diveintohtml5.info
• stackoverflow

Mit diesen drei Links möchte ich mich für Heute von euch verabschieden und wünsche euch eine angenehme Woche und natürlich Happy Coding!