Facebook chatbox doesn't reload between pages

Question

I observed this feature in Facebook, that when you have a chat box opened at the bottom right, and you go to another page, say, your friend's profile, or some photo collection page within Facebook, the chat box doesn't reload, it remains where it is (as if in a separate layer on top of the background page).

So naturally, I thought that Facebook isn't reloading the page per se, it is using history.pushstate and related functions to load the content asynchronously, and changing the URL dynamically (Firebug confirmed it, if you click on one of your friend's name and is taken to your friend's profile page, it is actually a GET request that is getting fired). So since there isn't exactly any page loading, the chatbox can just lay idle, as it is.

However, pushstate isn't supported by IE prior to version 10. Still, it works just fine in IE9 as well. So can anyone tell me how are they doing it? Are they using the history API at all, or something different?

Answer 1

That's a great question with a simply answer. I'm not sure about Facebook, but this should help you - History.js

History.js gracefully supports the HTML5 History/State APIs (pushState, replaceState, onPopState) in all browsers. Including continued support for data, titles, replaceState. Supports jQuery, MooTools and Prototype. For HTML5 browsers this means that you can modify the URL directly, without needing to use hashes anymore. For HTML4 browsers it will revert back to using the old onhashchange functionality.