How does facebook rewrite the original URL of a page in the address bar of a browser?

Question

Go to http://www.facebook.com/facebook?v=wall , then click the information tab. The content will be downloaded and the address bar will now become http://www.facebook.com/facebook?v=info , but the web page will not reload.

At first I think this is Ajax, but my question is how to change the address bar without rebooting? I know that I can change the anchor (#wall) using JS, but querystring (? V = wall), how?

Answer 1

It uses HTML5's new history.pushState() function, which allows the page to mask under a different URL than the one from which it was originally selected.

At the moment, it looks like WebKit support, so the rest of us see ?v=wall#!/facebook?v=info instead of ?v=info .

This function allows you to load pages with dynamic loading of bookmarks properly, share, etc. between JS-enabled and non-JS-enabled user agents. Because if you, as a JS user, linked someone to ?v=wall#!/facebook?v=info , and their browser did not support JS and XMLHttpRequest, the page would not work for them. #! also used as a hint to search engines to download a version other than AJAX.

Answer 2

@Snoob - I would appreciate if you accepted @bobince's answer instead, it was on the right track for the features here. Since I cannot delete / delete this until it is accepted, I will update it as correct as possible.

---

At the moment, this is WebKit (Chrome, Safari, etc.) the specific thing that you see (or rather, don't see), as @ bobince indicates that in other browsers you can see the real URL in the panel:

 http://www.facebook.com/facebook?v=wall#!/facebook?v=info\ 

If Chrome just shows:

 http://www.facebook.com/facebook?v=info 

This makes sense, considering that you are creating AJAX Content to crawl using the Google search engine , so their browser will recognize where the content also occurs.

Specific correction: Webkit browsers show the abbreviated facebook URL that wants to use the HTML 5 history functions, you can see the code here (take a look at the HistoryManager ), in this case they specifically use .replaceState() to replace the URL that you encounter , with direct one available.

Note. . This answer may not be valid later (a specific bit of WebKit), as other browsers support HTML5 more and more, it can quickly become obsolete.

Answer 3

For MooTools developers, I recommend checking out the cpojer mootools-history plugin, which provides support for the native history API, when available, with backup access to hashes.

Answer 4

I do not have Facebook, so I can not check. But I'm 95% sure that it should be a full page request, the location bar cannot be written, because it will be a very useful function to debug phishing sites (instead of http://fakeonlinebank.com, rewrite to http: // yourtrustybank ). It is probably so fast that your browser only downloads this part?

But I am curious to see if anyone will change me about this, because it will mean that they have an answer that you want to hear;)