实现github.com文件无缝文件导航

Question

I just noticed a recent change when browsing github repositorys. When you select a file or folder, the new file slides in and pushed the old file out. This is easy enough to do with jquery, but what's really different is that the URL itself actually changes so that bookmarks still work. I've been struggling to create this for a book navigating site I'm working on but haven't been able to update the url without a full page refresh. Any ideas on how github does this?

Answer 1

It's using the new HTML5 API history.pushState/history.replaceState for doing this (so it only works in modern browsers).

See https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history#Adding_and_modifying_history_entries for more details.

If you want a solution for all browsers, then you have to stick to modifying the fragment (the bit after the #)

Answer 2

I haven't looked at the underlying code, but I believe it is a combination of the new HTML5 spec of web history and location (well, location is old, but it's an updated spec).

• Mozilla docs
• W3C history spec
• W3C location spec

The W3C specs are very verbose (after all, they are specs), so that can be hard to read. I think this other answer on Stack Overflow is in the right direction.

You have to keep in mind that this is part of the HTML5 specs, so not every browser will be able to handle this functionality. We are building this type of navigation out on a project at work, and if the browser doesn't support this feature, it's just a regular page refresh.