How does Facebook change the URL in the browser's address bar without page reload or use of # or?

Question

A couple of months ago I saw a new feature deployed on vkontakte.ru (russian FB): when going between users pages, no browser reload happens. Instead, the new page gets preloaded, and then displayed. The music player that’s on the page (it’s anchored on top of the footer) keeps playing, uninterrupted.

However, the url in browser address bar changes, and not by means of a hash tag or a query string.

So, my page is vk.com/myPage... I click a friend, his page preloads, then gets displayed at which time the URL in browser address bar changes to vk.com/myfriendJoe, and no browser reload happens.

Note that it only works with the newest browsers like later versions of Safari and Chrome, for others like Firefox 3.6 it implements a fallback that uses hashtags and query strings.

I did some research and found window.history.pushState, but it only seems to work with query strings.

Any ideas would be greatly appreciated. Thank you.

Answer 1

That's the new history API defined by HTML5. You can see another demo here. You're quite right that it's pushState that does it, but it doesn't just work with query strings (as that page demonstrates, it's using rooted relative URLs like /history/first and /history/second).

Answer 2

If you're using a modern HTML5 compliant browser, you can use the history.pushState() API.

More here: https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history