jquery - How can I detect the back/forwards buttons being clicked when using History.js?

Question

Im using History.js (click) with jQuery in my code.

When loading new content via ajax i use:

History.pushState({my:stateobject},"newtitle","supernewurl");

This seems to work since the URL is updated in the browser.

However, I don't get it where I can hook up my code whenever a back or forward button is pressed. Which method/event is used for this?

Answer 1

You need to bind an event handler to the statechange event, like this:

$(window).bind('statechange',function(){
// Do something, inspect History.getState() to decide what
})

There is a complete javascript snippet that comes with History.js, which can be used to 'ajaxify' a site completely: https://github.com/browserstate/ajaxify

Take a look there for more inspiration.