开发者

How to rewrite URL without refresh, like GitHub.com

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 qu开发者_如何学Cite 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.


Github uses window.history.replaceState()

Here you can see how they do it


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.


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.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜