5

Github 有一个非常好的源代码浏览器。在 repo 中的不同路径之间导航会生成 ajax 调用以加载内容（您可以在 firebug 日志中清楚地看到）。ajax 调用返回要显示的新文件列表的 html。除了更改文件的视图列表外，url 也会更改。但是，它不像大多数 ajax 深度链接网站那样使用片段（使用 #）。在 github 上，整个 url 都发生了变化。

例如，在https://github.com/django/django的 django 存储库中，转到django文件夹将生成 ajax 请求，https://github.com/django/django/tree/master/django?slide=1&_=1327709883334该请求将返回文件夹的 html 内容。该链接也将更改为https://github.com/django/django/tree/master/django。如您所见，这个新链接不使用片段。

这是怎么做的？我一直认为基于 ajax 的网站必须使用 url 片段 (#) 来实现深度链接，但显然并非如此。

4

2 回答 2

7

您必须使用HTML5 的 pushState() 方法来更改浏览器历史记录。

window.history.pushState(data, "Title", "/new-url");

医生说：

pushState() 接受三个参数：一个状态对象、一个标题（当前被忽略）和（可选）一个 URL。

最后一个参数是新的 URL。出于安全原因，您只能更改 URL 的路径，而不能更改域本身。第二个参数是对新状态的描述。第一个参数是您可能希望与状态一起存储的一些数据。

于 2012-01-28T00:36:39.320 回答
4

好吧，正如Dav在评论中所描述的，GitHub 似乎没有使用 pAjax 库。由于我最终回答了一个“不正确”的信息（实际上我想我在回答这个问题时看到了一些与 GitHub 相关的使用 pAjax，但目前我找不到源），我去了正确答案。

我没有找到开发人员关于是否使用任何库的任何官方信息，只发现一个帖子说使用了 History API：https ://github.com/blog/760-the-tree-slider

然后我想到了，为什么不问代码本身呢？

使用 Chrome（实际上是任何具有良好开发工具的浏览器），打开存储库（在本例中为 pAjax），右键单击任何目录，只需选择检查元素。

检查元素

这将显示a负责目录链接的元素。

HTML结构

出现了一个“可疑”类，让我们在页面的 javascript 源中搜索它。

编码器！

这里是目录链接的点击事件处理程序，以及与动画和 History Api 相关的整个代码。可以注意到，它没有使用 History Api 背后的任何库。不要忘记标记漂亮打印选项。

旧的和不正确的答案

GitHub 使用 jQuery 插件pJax (pushState + Ajax)，它使用 HTML5 历史 API。

于 2012-01-28T00:51:00.400 回答