0

When a link is clicked on facebook, the top header bar doesn't flicker at all. I'm used to seeing this effect on pages where the content is loaded via ajax, but on Chrome, the url is changing, and, so far as I know, that means that a new page was loaded.

In javascript, I know the url can't be changed without a redirect, but the hashtag can, so I'm finding this very intriguing. I thought this might be something chrome does, where it loads a webpage before taking you off the previous one to create a seamless experience, so I tried it on Internet Explorer. On IE, the same effect is made, but this time the url doesn't change, just the hashtag. I tried on FireFox as well, and it changes the URL the same way chrome does.

What's going on here?

animuson
  • 53,861
  • 28
  • 137
  • 147
mowwwalker
  • 16,634
  • 25
  • 104
  • 157

3 Answers3

4

Yes, it's loaded with AJAX. And the urls are changed by manipulating the history. A nice library called HistoryJS also wraps this functionality for non-supporting browsers using hash changes.

Joseph
  • 117,725
  • 30
  • 181
  • 234
1

Not sure if it's the case on Facebook, but the History API lets you programmatically change the URL - as long as you comply to the same origin policy. GitHub is a great example of using this technique unobtrusively.

avramov
  • 2,119
  • 2
  • 18
  • 41
1

In modern browsers, it's possible to update the URL without reloading the page, via the history.pushState() function.

Example:

history.pushState({}, "", "foo.html");
Brilliand
  • 13,404
  • 6
  • 46
  • 58
  • I figured it was something along those lines, but I came to http://stackoverflow.com/questions/6478485/jquery-change-the-url-address-without-redirecting and it was relatively recent so I assumed it was still right. Thanks! – mowwwalker Jun 22 '12 at 22:47