views:

586

answers:

4

Go to http://www.facebook.com/facebook?v=wall, then click on the info tab. The content will be loaded, and the address bar now becomes http://www.facebook.com/facebook?v=info but the webpage didn't reload.

At first I think it is Ajax, but my question is, how do you change the address bar without reloading? I know I can change anchor (#wall) using JS but querystring (?v=wall), how?

A: 

I don't have Facebook so I can't check. But I'm 95% sure that it has to be a full page request, the location bar is unwritable because this would be a very useful feature to absure for phishing websites (instead of http://fakeonlinebank.com it rewrite to http://yourtrustybank). It's probably just so fast that your browser appears to only load that part?

But I'm curious to see if someone will correct me on this, because that would mean they have the answer you do want to hear ;)

CharlesLeaf
Thanks, i tried using Firebug to change somethings one facebook, then i click info tab and what i made still "alive" -> It isn't fullpage request
Snoob
Could they be using client-side storage to speed things up?
Michael
Which browser do you use, in my Firefox (Mac) this is the URL I end up with http://www.facebook.com/facebook?v=wall#!/facebook?v=info, definitely the history hash technique.
Michael
+13  A: 

@Snoob - I'd appreciate it if you accepted @bobince's answer instead, he's was on the right track about the specifics first here. Since I can't delete/remove this until it's unaccepted I'll update it to be as correct as possible.


At the moment it's a WebKit (Chrome, Safari, etc.) specific thing you're seeing (or rather, not seeing), as @bobince points out in other browsers you can see the real URL in the bar:

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

Where Chrome just shows:

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

It makes a bit of sense, given this is how you make AJAX Content crawlable with the Google search engine, so their browser recognizes where the content comes from as well.

Correction on the specifics: Webkit browsers are showing the shortened URL facebook wants using the HTML 5 history features you can see the code here (take a look at the HistoryManager) in this case specifically they're using .replaceState() to replace the URL you went to with the direct one available.

Note: This answer may not be valid later (the WebKit specific bit), as other browsers support HTML5 features more and more this may become outdated quickly.

Nick Craver
Great find Nick. A side note is that it´s probably a WebKit specific thing as it works the same in Safari.
anddoutoi
@anddoutoi - I don't have Safari to test :) I'll update to include this...and a note that this answer may be outdated quickly as others support HTML5 bits more and more.
Nick Craver
Interestingly, looking at the new Twitter design in a Webkit browser does **not** follow the same pattern that we're seeing on Facebook, i.e. I'm still seeing `/#!` in Twitter URLs but not in Facebook URLs.
chigley
@chigley - In this case the *reason* it works in WebKit is it's `history` support of HTML5, @bobince has the right idea, though for *this* particular example it's using `.replaceState()` instead of `.pushState()` (though facebook uses it elsewhere). Check out the `HistoryManager` object here: http://static.ak.fbcdn.net/rsrc.php/zF/r/4A0A_IDcjJ7.js
Nick Craver
The `#!` information is useful too though. I hadn't seen this being specified as a standard spider behaviour before, hopefully other engines will pick it up too.
bobince
@bobince - There are other search engines??
Nick Craver
+31  A: 

It's using HTML5's new history.pushState() feature to allow the page to masquerade as being at a different URL to that from which it was originally fetched.

This seems only to be supported by WebKit at the moment, which is why the rest of us are seeing ?v=wall#!/facebook?v=info instead of ?v=info.

The feature allows dynamically-loaded pages to be properly bookmarked, exchanged etc between JS-supporting and non-JS-supporting user agents. Because if you as a JS user linked someone to ?v=wall#!/facebook?v=info and their browser didn't support JS and XMLHttpRequest, the page wouldn't work for them. The #! is also used as a tip to search engines to download the non-AJAX version.

bobince
Thanks for info
Snoob
A: 

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

Ronny