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 appear as if the page has refreshed. Does anyone know how this is done? I've seen this done with the # sign, especially when creating Flash sites, but I've never seen this done quite like the way GitHub is doing it, without the #.

Here's an example: https://github.com/jquery/jquery

Click on one of the text files like .gitattributes then click on jQuery in the breadcrumb to see what I mean.

Doing a little more research it looks like this might be a webkit/Safari only feature. — Sandro, Dec 06 '10 at 22:51
On some browsers, the page repaint is a little less abrupt, so it looks smoother, but I think it is loading a new page. — bmb, Dec 06 '10 at 22:52

score 13 · Answer 1 · answered Dec 06 '10 at 23:01

13

Github uses window.history.replaceState()

Here you can see how they do it

answered Dec 06 '10 at 23:01

nunopolonia

13,237
3
24
28

Awesome, this was only a dream of mine back when I first started trying to do this and found for security purposes you had to use the hash trick instead. – Xeoncross Dec 07 '10 at 16:20

meder omuraliev · Accepted Answer · 2010-12-06T22:56:10.313

8

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.

edited Dec 06 '10 at 22:56

answered Dec 06 '10 at 22:49

meder omuraliev

171,706
64
370
423

2

The AJAX part isn't really what I was interested in, I'm more interested in how the URL is changing without refreshing the page. – Sandro Dec 06 '10 at 22:52
2

I think it might have to do with this: https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history – Sandro Dec 06 '10 at 22:54
3

yep, it's `history.pushState` – meder omuraliev Dec 06 '10 at 22:57
Pretty cool, huh? It looks like it works on Safari, Firefox and Chrome. – Sandro Dec 06 '10 at 23:00
@Sandro - Fx4? My 3.5 doesn't use `history.pushState` – meder omuraliev Dec 06 '10 at 23:01
My mistake, looks like it only works on Safari and Chrome for me. – Sandro Dec 06 '10 at 23:03
@meder Fx4+ supports it too. Fx3.5 is too old and unsupported now. – lilydjwg Jun 08 '12 at 09:57

score 2 · Answer 3 · answered Dec 07 '10 at 03:32

2

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.

answered Dec 07 '10 at 03:32

Harish

463
2
11

The link is dead. Can you find another, similar source, by any chance? – Berry M. Mar 27 '17 at 14:56

How to rewrite URL without refresh, like GitHub.com

3 Answers3

Linked

Related