1

I was on Facebook and realised that when I change page the page address changes but the page does not redirect but loads via ajax instead.

You can tell because the console does not clear when you click the link but the URL changes.

Weird, but anyone know how it is done?

ITg
  • 140
  • 9
  • 2
    You've hit the nail on the head accurately. They use javascript to manipulate the DOM based on async callbacks. You would then update the window location (the address bar) also from javascript, using the window object. – jcolebrand Oct 18 '10 at 18:00
  • Your question is included in [The Facebook footer bar is an iframe, so why it doesn't it reload with the rest of the page?](http://stackoverflow.com/questions/1562460/the-facebook-footer-bar-is-an-iframe-so-why-it-doesnt-it-reload-with-the-rest-o) - I've tried to provide some additional information there. – Shog9 Oct 18 '10 at 18:04
  • Yes, that would explain some things but it changes the URL as a hash, whereas now they change the URL! :O Amazing XD – ITg Oct 18 '10 at 18:12
  • 1
    @ITg: look closer - if the page isn't reloading, there's a hash in there somewhere... – Shog9 Oct 18 '10 at 18:20
  • @ITg ~ If there is no hash then they reloaded the page. Exactly as @Shog9 says. – jcolebrand Oct 18 '10 at 18:23
  • There isn't... take a look for yourself. You can see the chat modules stay open when you change page but the URL does change. No hash what so ever – ITg Oct 18 '10 at 18:24
  • and the console does not empty – ITg Oct 18 '10 at 18:25
  • That's because it loads really quickly. – jcolebrand Oct 18 '10 at 18:26
  • idk, I'm getting a flushed console if I repost, but not if I merely ajax change pages .. – jcolebrand Oct 18 '10 at 18:38
  • Yeh, if you changed page using the tabs on the left and click on "Messages" for example, you'll see the URL change but an ajax request fire – ITg Oct 18 '10 at 18:47
  • 1
    @ITg: look at the URL that's actually being loaded, not the URL that appears when you hover over the link. Facebook is slick about this: many areas are accessed by two URLs: one with a normal path, and one with a fragment. The fragment version is used when loading via AJAX to avoid the whole page reload, and - here's the trick - if you *force* a reload on that URL, the resulting page will client-side redirect you to the path version. If you *really* want to see what's happening, install the Live HTTP Headers add-on, or use Fiddler. – Shog9 Oct 18 '10 at 18:54

1 Answers1

0

Facebook runs with massive AJAX calls that changes the page state and the sections. So to make a page linkable to somebody by copying the URL address, every time you call an AJAX relevant function they updates the URL using a fake anchor "#!" plus the real address. Simply when you load the real page (using F5 or linking that so somebody) a JS parser catchs the string after #! (if there is) and redirect you to baseaddress + that.

I belive something like this (untested):

var urlstr = new String(location.href);
var urlparm = urlstr.split('#!');
var last = urlparm.length - 1;

if( (urlparm[last] != urlparm[0]) && (urlparm[last] != "/") )
{  var redir = "http://www.facebook.com" + urlparm[last];
   location.href = redir;
}

In Google Chrome instead the URL really changes, I'm according that there is an hash somewhere, but I don't know where and how.

Fabio Mora
  • 5,339
  • 2
  • 20
  • 30