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

问题

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?

回答1:

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.

回答2:

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.

回答3:

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>';
}

回答4:

Sammy is a javascript library that does just this.

回答5:

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.

回答6:

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.

回答7:

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

How to show Ajax requests in URL?
How does Gmail handle back/forward in rich JavaScript?

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).

来源：https://stackoverflow.com/questions/940964/could-a-page-display-diferrent-content-if-the-url-hash-changes

标签

javascript

ajax

url

hash

fragment-identifier