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
statechangeevent, 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
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 :)