"Redirect" page without refresh (Facebook photos style) "Redirect" page without refresh (Facebook photos style) ajax ajax

"Redirect" page without refresh (Facebook photos style)


I've tried to change through facebook images, and this is what I saw:

In Firefox:

The page URL is not changing. Only the hash is changing. This is a technique used to allow crawlers to index the content. What happens is this:

  • User clicks on "next"
  • JS loads the next image with tags, comments, etc and replaces the old content with them.
  • JS changes the hash to correspond the new image

urls look like this: http://www.facebook.com/home.php?#!/photo.php?fbid=1550005942528966&set=a.1514725882151300.28042.100000570788121&pid=3829033&id=1000001570788121 (notice the hash)

As for the second question, this is just a benefit of the technique above. When you are on facebook, the page rarely gets actually refreshed. Only the hash is changed so that you can send links to other people and crawlers can index the content.

In Google Chrome:

It seems that chrome hassome way to change urls without refreshing the page. It does that by using window.history.pushState. Read about it here.

urls look like this: http://www.facebook.com/photo.php?fbid=1613802157224343&set=a.1514725288215100.28042.1000005707388121&pid=426541&id=1000001570788121 (notice that there is no hash here, but still the url is changing along with images)

In Epiphany:

Epiphany doesn't change the URL when the image changes.

urls look like this: http://www.facebook.com/photo.php?fbid=1441817122377521&set=a.1514725882215100.28042.1000005707848121&pid=3251944&id=1000200570788121 (there is no hash, and the URL stays the same when changing the image)

(don't have other browsers to verify right now)


The one technique not mentioned here is the window.onhashchange() method (supported in ie8+ and most others) which they might have used


You may noticed that the page url remain the same. What is changed, however, is page hash (the part after # in the url).

You need something like this: http://code.google.com/p/reallysimplehistory/