Detecting Back / Hash Button in URL

Question

I just installed my new homepage at http://ritter.vg . I use jQuery, but very minimally.
It loads all pages using AJAX - I configured it to bookmark it by detecting a hash in the url.

//general functions function getUrl(u) { return u + '.html'; } function loadURL(u) { $.get(getUrl(u), function(r){ $('#main').html(r); } ); } //allows bookmarking var hash = new String(document.location).indexOf("#"); if(hash > 0) { page = new String(document.location).substring(hash + 1); if(page.length > 1) loadURL(page); else loadURL('news'); } else loadURL('news'); 

But I can’t get the back and forward buttons to work.

Is there a way to detect when the back button was clicked (or determine when the hash changes) without using the setInterval loop? When I tried those with a latency of 0.2 and 1 second, it bound my processor.

Answer 1

Use the jQuery hashchange plugin instead . As for your complete ajax navigation, try an SEO friendly ajax . Otherwise, your pages didn’t display anything in browsers with JavaScript restrictions.

Answer 2

The answers here are pretty old.

In the HTML5 world, you should use the onpopstate event.

 window.onpopstate = function(event) { alert("location: " + document.location + ", state: " + JSON.stringify(event.state)); }; 

Or:

 window.addEventListener('popstate', function(event) { alert("location: " + document.location + ", state: " + JSON.stringify(event.state)); }); 

The last fragment allows you to use multiple event handlers, while the first will replace any existing handler that can cause hard-to-reach errors.

Answer 3

jQuery BBQ (back button and query library)

A high-quality hash browser for the browser and very updated (January 26, 2010) at the time of this writing (jQuery 1.4.1) .

Answer 4

HTML5 included a much better solution than using hashchange, which is the HTML5 state management API - https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history - they allow you to change the page url without using hashes!

Although the HTML5 status feature is only available for HTML5 browsers. Therefore, you probably want to use something like History.js , which provides backward compatibility with HTML4 browsers (via hashes, but still supports data and headers as well as replaceState functionality).

You can read more about this here: https://github.com/browserstate/History.js

Answer 5

Another great implementation is the balupton jQuery story , which will use its own onhashchange event if it is supported by the browser, if it will not use an iframe or browser spacing to ensure that all expected functionality is emulated successfully. It also provides a good interface for binding to certain states.

Another noteworthy project is jQuery Ajaxy , which is pretty much an extension to the jQuery story to add ajax to the mix. When you start using ajax with hashes, it's pretty complicated !

Answer 6

I do the following if you want to use it, then paste it somewhere and set the handler code to locationHashChanged (qs) where you commented on it, and then call changeHashValue (hashQuery) every time you load an ajax request. This is not a quick answer, and it is not, so you will need to think about it and pass reasonable hashQuery arguments (i.e. a = 1 & b = 2) to change the HashValue (hashQuery), and then serve each combination of the mentioned arguments to your HashChanged location (qs) callback ...

 // Add code below ... function locationHashChanged(qs) { var q = parseQs(qs); // ADD SOME CODE HERE TO LOAD YOUR PAGE ELEMS AS PER q !! // YOU SHOULD CATER FOR EACH hashQuery ATTRS COMBINATION // THAT IS PASSED TO changeHashValue(hashQuery) } // CALL THIS FROM YOUR AJAX LOAD CODE EACH LOAD ... function changeHashValue(hashQuery) { stopHashListener(); hashValue = hashQuery; location.hash = hashQuery; startHashListener(); } // AND DONT WORRY ABOUT ANYTHING BELOW ... function checkIfHashChanged() { var hashQuery = getHashQuery(); if (hashQuery == hashValue) return; hashValue = hashQuery; locationHashChanged(hashQuery); } function parseQs(qs) { var q = {}; var pairs = qs.split('&'); for (var idx in pairs) { var arg = pairs[idx].split('='); q[arg[0]] = arg[1]; } return q; } function startHashListener() { hashListener = setInterval(checkIfHashChanged, 1000); } function stopHashListener() { if (hashListener != null) clearInterval(hashListener); hashListener = null; } function getHashQuery() { return location.hash.replace(/^#/, ''); } var hashListener = null; var hashValue = '';//getHashQuery(); startHashListener(); 

Answer 7

Try the simple and easy PathJS lib.

A simple example:

 Path.map("#/page").to(function(){ alert('page!'); });