For my current employer I help in building a heavy javascript based website/application. Using a javascript-based site, with a lot of ajax, you have to make sure the user can still use the back button without breaking the experience.

So we used the HTML5 history, and tested that on Firefox and chrome and it worked just fine.

Of course, our first client is using IE9, and it breaks completely.

The most famous library to port HTML5 history behaviour to all browsers is history.js. Unfortunately I encountered a few very specific issues with it:

  • it uses statechange event, so it is triggered when pushing or popping a new state, and I can’t tell which change it is. I am only interested in the pop state. This is akward, but fixable.
  • we are building a SPARQL browser, so the url’s we build contain RDF identifiers, which are URI’s. History.js just can’t handle that. It will unescape the uri’s, and thus break the built url and stored state as well. This was not simply fixable at all. It was supposedly fixed in the dev-branch, but even that did not work

So I had to go looking for an alternative, with the following characteristics:

  • support the same API as the HTML5 history, or as close as possible
  • allow to build urls containing escaped uri’s
  • and of course: work on IE9 and up

And luckily, I found that library: HTML5-History-API, which is an exact implementation of the history API.

The only change was my popstate event (and include the javascript library, of course).

Before it was implemented as follows (coffeescript) :

   window.addEventListener "popstate", (e) ->
     state = window.history.state
     state = event.state
     if state
       if state.query != undefined
         update(state.query)

and now it looks like:

   window.addEventListener "popstate", (event) ->
     event = event || window.event
     state = event.state
     if state
       if state.query != undefined
         update(state.query)

And then my code just worked on IE9! Awesome :)