Change browser URL and page content without reload and without using fragments

Question

I'm well aware of the technique of using URL fragments to track state on an AJAX powered webpage, but lately I've noticed a lot of sites that are doing something similar but without fragments.

The picture viewer in the latest version of Facebook for example operates this way. The left and right navigation buttons are simple links with no fragments that when clicked change the browsers URL without doing a full page load.

Another example is GitHub's repository browser, each of the files/folders is a simple link that changes the page state and browser URL without reloading or using page fragments.

Can anyone explain, or point me to an explanation of how this works? I've done some searching, but there is so much content on using fragments that I haven't been able to find anything.

Yvonneyvonner

possible duplicate of How to do awesome refreshless page changes like GitHub – Parmer

Answer 1

I believe this is due to the new History pushState HTML5 feature

Spacetime

Awesome, thanks! Facebook does indeed degrade to fragments and github degrades to full page refreshes on "downlevel" IE8. – Yvonneyvonner

Yep no problem. Yeah eventually when HTML5 support is more widespread this will be quite a useful feature though – Spacetime

Answer 2

They are using new HTML5 History API. I think this is what you want. check the menu items in this page http://tinywall.info/demos/html5-history-api/menu1.php

The tutorial to implement is right here : http://t.co/M4RvnvoQ

Mogilev