Search code examples
javascripthtmlajaxpage-refresh

A web partial update effect in Facebook with URL changed

Possible Duplicate:
Modify the URL without reloading the page

I found that in Facebook if I click the Notes or Music links on left section, only the central section gets refreshed while the URL is changed, from www.facebook.com to www.facebook.com/Notes.

As I know, changing URL will trigger whole page reload. What magic does Facebook do to its web pages?

Solution

  • The magic is history.pushState().

    Example

    Suppose http://mozilla.org/foo.html executes the following JavaScript:

    var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");

    This will cause the URL bar to display http://mozilla.org/bar.html, but won't cause the >browser to load bar.html or even check that bar.html exists.