60

转到http://www.facebook.com/facebook?v=wall，然后单击信息选项卡。内容将被加载，地址栏现在变为http://www.facebook.com/facebook?v=info但网页没有重新加载。

一开始我以为是Ajax，但我的问题是，如何在不重新加载的情况下更改地址栏？我知道我可以使用 JS 更改锚点（#wall）但查询字符串（？v=wall），如何？

4

4 回答 4

64

它使用 HTML5 的新history.pushState()功能来允许页面伪装成与最初获取的 URL 不同的 URL。

目前这似乎只有 WebKit 支持，这就是为什么我们其他人看到?v=wall#!/facebook?v=info的不是?v=info.

该功能允许在支持 JS 和不支持 JS 的用户代理之间正确地为动态加载的页面添加书签、交换等。因为如果您作为 JS 用户将某人链接到?v=wall#!/facebook?v=info并且他们的浏览器不支持 JS 和 XMLHttpRequest，那么该页面将不适用于他们。#!也用作提示搜索引擎下载非 AJAX 版本。

于 2010-10-03T13:09:53.727 回答
19

@Snoob - 如果您接受@bobince 的回答，我将不胜感激，他首先在这里的细节是正确的。由于在它未被接受之前我无法删除/删除它，因此我将其更新为尽可能正确。

目前，它是您看到（或者更确切地说，没有看到）的WebKit （Chrome、Safari 等）特定的东西，正如@bobince在其他浏览器中指出的那样，您可以在栏中看到真实的URL： 

http://www.facebook.com/facebook?v=wall#!/facebook?v=info\

Chrome 刚刚显示的地方：

http://www.facebook.com/facebook?v=info

这有点道理，因为这是您使用 Google 搜索引擎使 AJAX 内容可抓取的方式，因此他们的浏览器也可以识别内容的来源。

更正细节： Webkit 浏览器使用 HTML 5 历史功能显示 facebook 想要的缩短 URL，您可以在此处查看代码HistoryManager（查看.replaceState()直接一个可用。

注意：这个答案以后可能无效（WebKit 特定位），因为其他浏览器越来越多地支持 HTML5 功能，这可能很快就会过时。

于 2010-10-03T12:59:57.180 回答
0

对于 MooTools 开发人员，我建议查看 cpojer 的mootools-history插件，该插件在可用时提供对本机历史 API 的支持，并回退到哈希。

于 2010-10-21T22:54:50.690 回答
-8

我没有脸书，所以不能查。但我 95% 确定它必须是一个完整页面请求，位置栏是不可写的，因为这对于网络钓鱼网站来说是一个非常有用的功能（而不是http://fakeonlinebank.com它重写为http: //你的信任银行）。它可能太快了，以至于您的浏览器似乎只加载了那部分？

但我很想知道是否有人会纠正我，因为这意味着他们有你想听到的答案；）

于 2010-10-03T12:55:55.157 回答