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 On second thought, it could be some new HTML5 feature that only chrome supports.location.href
is updated.
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.
精彩评论