How can I detect pressed back / forward buttons 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, as the URL is updated in the browser.

However, I do not understand where I can connect my code whenever the back or forward button is pressed. What method / event is used for this?

Answer 1

You need to bind the event handler to the statechange event, for example:

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

There is a complete javascript snippet that comes with History.js that can be fully used for the "ajaxify" site: https://github.com/browserstate/ajaxify

Take a look there for more inspiration.

Answer 2

You would not be able to capture the back-click event since it is not there.

What you want to do is make sure that the history object is in the correct state using the methods window.history.pushState , window.history.popState , window.history.replaceState .

https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history

Answer 3

I managed to use the onPopState event to fire my custom AJAX code.

 window.onpopstate = function(event) { $(fellowModal).foundation('reveal', 'close'); }; 

I tried a few other things and it worked for me.