A web partial update effect in Facebook with URL changed

Question

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?

have a look to http://stackoverflow.com/questions/824349/modify-the-url-without-reloading-the-page — Jerome Cance, Dec 27 '12 at 12:09
It's called `pushState`. Take a look at [History.js](https://github.com/balupton/History.js/). Note, not all browsers and versions support this functionality, so you should consider a library instead of rolling your own, or investigating how the plugins degrade gracefully. — Jared Farrish, Dec 27 '12 at 12:10

score 3 · Accepted Answer · answered Dec 27 '12 at 12:10

3

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.

answered Dec 27 '12 at 12:10

rekire

47,260
30
167
264

1

Here's a more descriptive [MDN page on the topic](https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history). Down at the bottom, someone inserted a reference to [Balupton's History.js](https://github.com/balupton/history.js) in reference to cross-browser support. See the [litany of issues](https://github.com/balupton/history.js/wiki/The-State-of-the-HTML5-History-API), too. – Jared Farrish Dec 27 '12 at 12:15
@Jared: Does Hostory.js works for IE 7-8? – Ricky Dec 28 '12 at 02:53
@Ricky - http://caniuse.com/#feat=history There's a reason there's nothing but `?` and `none` under IE on the `litany` link above. – Jared Farrish Dec 28 '12 at 03:00

score 1 · Answer 2 · answered Dec 27 '12 at 12:10

you can manipulate the browser history with javascript command like pushState/replaceState/popstate

Example:

function processAjaxData(response, urlPath){
     document.getElementById("content").innerHTML = response.html;
     document.title = response.pageTitle;
     window.history.pushState({"html":response.html,"pageTitle":response.pageTitle},"", urlPath);
 }

A web partial update effect in Facebook with URL changed

2 Answers2

Example