simulating HTML5 history on IE8+

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) : [javascript] window.addEventListener "popstate", (e) -> state = window.history.state state = event.state if state if state.query != undefined update(state.query) [/javascript] and now it looks like: [javascript] window.addEventListener "popstate", (event) -> event = event || window.event state = event.state if state if state.query != undefined update(state.query) [/javascript] And then my code just worked on IE9! Awesome :)
Add comment

Recent comments