1

i see sometimes on some sites like facebook or the Play Store from google, that by clicking a link the url changes (NOT with #blah), but the wohle site doesn't reload. I can use back/forward, so it could't be javascript, i think.

Can anybody say me how to implement that on a site? thanks

vtni
  • 950
  • 3
  • 14
  • 43

3 Answers3

6

It uses pushState, and it is done using javascript and HTML5 with pushState compatible browsers. Here is some documentation: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history

A quote from those docs:

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.

The url can be changed in this way, and the new page is rendered using javascript. I do this by using Backbone.js, but there are other tools to do the same thing. It is mostly the same technique as those URLs with # in them, except they get rid of the hash. Backbone.js will use a # by default, but can be configured to make the URL to appear normal.

Here is a SO question about how to do this using Backbone

Community
  • 1
  • 1
RustyToms
  • 7,600
  • 1
  • 27
  • 36
0

Another way this can be achieved is with AngularJS. As was said in the above comments, this will use AJAX to get new data to display, and then use javascript to change the content of the page, all without loading a new URL.

krillgar
  • 12,596
  • 6
  • 50
  • 86
0

For browsers whose not support htmll5 like ie8, you can use the library https://github.com/browserstate/history.js/ which emulate the html5 pushstate method.

Jérôme
  • 292
  • 1
  • 6