Could a page display diferrent content if the URL hash changes?

Question

How could a page display different content based on the URL hash?

I'm not talking about the browser scrolling down to display the anchored section, but something like JavaScript reacting to that hash and loading different content via AJAX.

Is this common or even probable?

Answer 1

This is occasionally done. Youtube uses hashes to link to specific timestamps within a video.

EDIT: I had assumed that you might have an issue where if the user goes up and manually edits the hash in the address bar, the page doesn't reload and even javascript will not know that it changed. I was wrong. I tried it on Youtube it works.

Answer 2

As JavaScript has access to the URL-string it could of course act differently on the contents of the url.

I've occassionally seen something like this but I don't think that this is a good way to react unless in very specific uses.

One of the uses I remember was TiddlyWiki using the after-portion of the hash to set preferences for the page rendering and such.

Answer 3

It is fairly common among AJAX-heavy applications (think Gmail) to be able to have all the AJAXy stuff while still making it possible for you to bookmark a particular page or link someone to a particular page. If they didn't do this, it would be considered bad for usability. It is fairly easy to get the URL hash by doing window.location.hash - so you can then have a switch-like statement on page load to execute a particular set of Javascript functions if a hash is present.

Some jQuery plugins that achieve this functionality: history/remote, history.

Answer 4

Oh yes - it's becoming a common pattern to handle page-state-to-URL persistence when content is AJAX driven.

Javascript can access this value via window.location.hash. Once that's done, you can perform any actions based on the value of that hash

• Show/hide nodes
• Makes other AJAX calls
• Change page titles or colors
• Swap images
• etc

Really, any DHTML effect.

Answer 5

I just built a system to do this a few weeks ago

depeding on the browser you need to detect the hash, heres how to do that

// test all possible places hash could be on different browsers
if(window.location.hash){
   hash = window.location.hash;
else if (document.location.hash){
   hash = document.location.hash;
else if(location.hash){
   hash = location.hash;
}

// some browsers start the hash with #, remove it for consistency
if(hash.substring(0,1) = '#'){
    hash = hash.substring(1,hash.length);
}

Then handle the value of the hash variable to trigger page changes as you please.

for example: http://www.example.com#pageA

if(hash = 'pageA'){
  document.getElementById('mainContentDiv').innerHTML = '<p> content for the page displayed when the hash sais pageA</p>';
}

Answer 6

Sammy is a javascript library that was recently released that does just this.

Answer 7

The answer for this question will be more or less the same as my answers for these questions:

• http://stackoverflow.com/questions/3205900/how-to-show-ajax-requests-in-url/3276206#3276206
• http://stackoverflow.com/questions/3460041/how-does-gmail-handle-back-forward-in-rich-javascript/3460269#3460269

In summary, two projects that you'll probably want to look at which explain the whole hashchange process and using it with ajax are:

• jQuery History (using hashes to manage your pages state and bind to changes to update your page).

• jQuery Ajaxy (ajax extension for jQuery History, to allow for complete ajax websites while being completely unobtrusive and gracefully degradable).