Question

I am trying to implement content browsing like it is done on Facebook when user is browsing the photos. I guess everyone is familiar with that photo browsing where you can click “next” and “previous” and immediately get the next or previous photo (you can also navigate using arrow keys).

When you click “next” for example you notice that the page does not refresh – only the content. At first I thought it is done using plain ajax calls which refresh only the “content” in this case the image, description and comments. But then I noticed that also URL in the “Location” toolbar of my browser is changed!
I tried to inspect this using Firebug and discovered that when you click “next” only the next photo is downloaded and I still don’t know from where the comments & image meta data (description, time, tags,…) are loaded.

Can someone please explain how this technique is done – page URL changes without page refresh (or even without page “blinking” if it refreshes from cache).
I know how to change page content using ajax but URL of that page stays the same all the time. If I click on “refresh” button I get the first page again. But not on Facebook since even the “window.location” is changed every time without actual redirect.

The other thing I noticed is that the bottom toolbar (applications, chat, …) is “always on top”. Even if you change the page, this toolbar is not refreshed and always stays on top – it doesn’t even “blink” like other pages that are refreshed (either from webserver or from local cache). I guess this is the same technique as above – some kind of “fake” redirects or something?

The Answer is pushState

if (window.history.pushState)
    window.history.pushState([object or string], [title], [new link]);

You will smile 🙂

Answer 1

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)