如何实现“GitHub浏览repo效果”（更新URL不刷新页面）

Posted 2023-02-22

【中文标题】如何实现“GitHub浏览repo效果”（更新URL不刷新页面）

【英文标题】：How do I achieve the "GitHub browse repo effect" (update URL without refreshing the page)

【发布时间】：2011-10-03 09:59:17

【问题描述】：

当我在 GitHub 中浏览一个存储库（例如：https://github.com/sizzlelab/kassi）并单击一个文件夹时，它会加载带有很酷的 javascript 动画的文件夹，将内容移动到左侧，而不是重新加载整个页面。但是，页面的 URL 仍然会在每次点击时更新。

我如何实现这一目标？据我所知，您无法从 javascript 更新页面 URL，因此您需要刷新页面。我的猜测是他们对页面进行了部分缓存，因此它似乎不会重新加载，然后在重新加载后运行 javascript 动画。我在正确的轨道上吗？关于如何实现这一点的任何指示？我的环境是 jQuery 和 rails，但一般建议也会有所帮助。

【问题讨论】：

今天看到这个也很好奇。但还不足以深入挖掘:(

GitHub Slider JQuery Plugin...的可能重复

Merlyn：是的，这个问题很接近，但我对通过刷新页面来更新 url 的方法比他们在 GitHub 中的实际幻灯片效果更感兴趣，而且似乎没有答案在另一个问题中。但是感谢您的评论！

【参考方案1】：

你想要的是观看这个截屏视频：http://railscasts.com/episodes/246-ajax-history-state

结合jQuery UI效果“幻灯片” - http://docs.jquery.com/UI/Effects/Slide

祝你好运！

【讨论】：

嘿酷，我以前怎么没找到！非常感谢，正是我想要的方向！

【参考方案2】：

您可以在规范 History API 和 MDN 中的“添加和修改历史条目”部分中阅读有关此行为的信息。

【讨论】：

谢谢！那么它是 html5 的东西吗？关于目前浏览器支持什么的任何想法？它是否优雅地降级，如果是，如何降级？简单地刷新整个页面？好吧，只是几个简单的问题，我现在深入研究这些链接。 :)

Modernizr 检查历史 API 类似这样： function isHistorySupport() return !!(window.history && history.pushState);

@Kusti MDN 链接底部有浏览器兼容性

@Kusti: 根据the blog page linked from the dupe question 的说法，HTML5 管理历史更改，CSS3 处理滑动。

有一个不错的库可以帮助通过 hashbang 模拟新的 History API — github.com/balupton/history.js