How to rewrite URL without refresh, like GitHub.com

Question

I was browsing GitHub.com and I noticed when looking at the source for a repository, and you click on a file, the source code slides in and the URL changes, but it doesn\'t

Answer 1

Github uses window.history.replaceState()

Here you can see how they do it

Answer 2

XMLHttpRequest is used on the client-side in Chrome/Webkit browsers to fetch server-side resources without page refreshing, and content is dynamically loaded in, and animations can be hooked in during that content being appended.

I'm not sure exactly why only Chrome is targeted by the ajax, as usually the hash mark changes when ajax is applied in the same manner ( like twitter ).

For the url changing dynamically, I believe all that's done is location.href is updated. On second thought, it could be some new HTML5 feature that only chrome supports.

Answer 3

I found this article which explains these HTML5 features - window.history.pushState(), window.history.replaceState() and the onpopstate() event: http://www.spoiledmilk.dk/blog/?p=1922

As the article mentions, Flickr is also using this technique in several places.