14

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

Jeaf Gilbert
  • 11,495
  • 19
  • 78
  • 105
  • 2
    For what it's worth [History.js](https://github.com/balupton/History.js) provides the same HTML5 API while gracefully degrading any browser that doesn't support it (including support for data and titles, and replaceState functionality). Using that would mean you wouldn't have to change your code for the IE9 changes. – balupton Feb 09 '11 at 15:07

3 Answers3

6

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)

Gabi Purcaru
  • 30,940
  • 9
  • 79
  • 95
  • Agreed. Thx for the explanation, I'll add my code about pushState in question. – Jeaf Gilbert Oct 29 '10 at 08:26
  • Maybe the time you answered this they used hash changes to load new images, but now when you click the next button, the url itself gets changed but the doesn't refresh. And even when you click Top news in home page url changes but page doesnt refresh. I'm really curious as to how that works. – Sridarshan Jul 07 '11 at 06:21
  • @UberGeek AFAIK firefox (I assume you talk about it) has support for `window.history.pushState` in new versions – Gabi Purcaru Jul 07 '11 at 07:31
2

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

Jordan
  • 21
  • 1
  • I believe this is exactly what happens rather than the other way around. The next and previous links just change the hash and the JavaScript code reacts and load the relevant photo. – Tallmaris Nov 07 '12 at 22:16
0

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/

Ionuț Staicu
  • 21,360
  • 11
  • 51
  • 58
  • That is not correct. Image urls appear like `http://www.facebook.com/photo.php?fbid=135122293393816&set=t.1575828580&pid=8182864&id=15752828580` in my chrome URL bar and there is no `#` in it. – Gabi Purcaru Oct 29 '10 at 07:30
  • @Gabi: Chrome supports window.history.pushState, and therefore in Chrome it is possible to change the URL bar without forcing a reload. In other browsers (Firefox, IE), the URL Bar is only mutable through the window.location.hash method which appends changes data (or retrieves it) from after a hash tag at the end of the URL. – Reese Moore Oct 29 '10 at 08:01