Catch “Back” event in browser and load different content

Question

I've been working on a project using the hashbang (#!) method to skip though pages. Basically there is only 1 page, and when you click to go to a diffrent page, you stay on the page, but the URL changes, e.g. from index.html#home to index.html#about and new content is loaded via AJAX/JSON. All works well, but if I go "back" (or forward) in the browser, only the page in the URL changes, but my jQuery isn't fired to reload the content.

What I need is some code that will handle both the back and forward actions in all browsers, so that I can fire the function to load the page from jQuery. How do I do this?

Answer 1

Why reinvent the wheel? History.js is a great & well-maintained jQuery plugin that supports the new HTML5 History API and falls back gracefully to using hash URLs instead when the History API isn't supported. Works in just about every browser (even IE 6).

Answer 2

Take a look at the hashchange event. It fires when the hash is changed. However, you should only do this for Internet Explorer 8 support.

Internet Explorer 7 does not support hashchange, so you can't rely on that. As for Internet Explorer 9, it (along with Chrome, Safari and Firefox, of course) supports the History API, which you should be using instead. It keeps your URLs clear, short and semantic, while enabling elegant Back/Forward button support.

Answer 3

There is a jQuery-Plugin that seems to be doing exactly what you want.

http://www.asual.com/jquery/address/

It was the highest voted answer for the questing What is the best back button jQuery plugin?