转到http://www.facebook.com/facebook?v=wall,然后单击信息选项卡。内容将被加载,地址栏现在变成http://www.facebook.com/facebook?v=info但网页没有重新加载。
一开始我以为是ajax,但是我的问题是,不重载怎么改地址栏?我知道我可以使用 JS 更改锚点 (#wall),但使用查询字符串 (?v=wall),如何?
转到http://www.facebook.com/facebook?v=wall,然后单击信息选项卡。内容将被加载,地址栏现在变成http://www.facebook.com/facebook?v=info但网页没有重新加载。
一开始我以为是ajax,但是我的问题是,不重载怎么改地址栏?我知道我可以使用 JS 更改锚点 (#wall),但使用查询字符串 (?v=wall),如何?
它使用 HTML5 的新history.pushState()
功能允许页面伪装成与最初获取它的 URL 不同的 URL。
目前这似乎只有 WebKit 支持,这就是为什么我们其他人看到的?v=wall#!/facebook?v=info
不是?v=info
.
该功能允许动态加载的页面在支持 JS 和不支持 JS 的用户代理之间正确添加书签、交换等。因为如果您作为 JS 用户将某人链接到?v=wall#!/facebook?v=info
并且他们的浏览器不支持 JS 和 XMLHttpRequest,那么该页面将无法为他们工作。该#!
也被用来作为小费给搜索引擎,下载非AJAX版本。
@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
这是有道理的,因为这是让 AJAX 内容可被 Google 搜索引擎抓取的方式,因此他们的浏览器也能识别内容的来源。
更正细节: Webkit 浏览器使用 HTML 5 历史功能显示缩短的 URL,您可以在此处查看代码(查看HistoryManager
),在这种情况下,它们专门.replaceState()
用于替换您使用直接一个可用。
注意:此答案稍后可能无效(WebKit 特定位),因为其他浏览器越来越多地支持 HTML5 功能,这可能很快就会过时。
对于 MooTools 开发人员,我建议查看 cpojer 的mootools-history插件,该插件在可用时提供对本机历史 API 的支持,并回退到哈希。
我没有 Facebook,所以我无法查看。但我 95% 确定它必须是一个完整的页面请求,地址栏是不可写的,因为这对于钓鱼网站来说是一个非常有用的功能(而不是http://fakeonlinebank.com,它重写为http: //您的信托银行)。它可能太快以至于您的浏览器似乎只加载那部分?
但我很想知道是否有人会就此纠正我,因为那意味着他们有你想听到的答案;)