facebook 如何在浏览器地址栏中重写页面的源 URL?

IT技术 javascript ajax html webkit fragment-identifier
2021-01-21 14:43:10

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

一开始我以为是ajax,但是我的问题是,不重载怎么改地址栏?我知道我可以使用 JS 更改锚点 (#wall),但使用查询字符串 (?v=wall),如何?

4个回答

它使用 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 功能,这可能很快就会过时。

不过这些#!信息也很有用。我之前没有看到这被指定为标准的蜘蛛行为,希望其他引擎也能接受它。
2021-04-03 14:43:10
伟大的发现尼克。附带说明一下,它可能是 WebKit 特定的东西,因为它在 Safari 中的工作方式相同。
2021-04-04 14:43:10
有趣的是,看着新的Twitter设计的WebKit浏览器并没有遵循我们看到在Facebook上相同的模式,即我仍然看到/#!在Twitter的网址,而不是在Facebook的网址。
2021-04-04 14:43:10
@bobince - 还有其他搜索引擎吗??
2021-04-10 14:43:10
@anddoutoi - 我没有要测试的 Safari :) 我会更新以包含这个......并注意这个答案可能很快就会过时,因为其他人越来越多地支持 HTML5 位。
2021-04-13 14:43:10

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

我没有 Facebook,所以我无法查看。但我 95% 确定它必须是一个完整的页面请求,地址栏是不可写的,因为这对于钓鱼网站来说是一个非常有用的功能(而不是http://fakeonlinebank.com,它重写为http: //您的信托银行)。它可能太快以至于您的浏览器似乎只加载那部分?

但我很想知道是否有人会就此纠正我,因为那意味着他们有你想听到的答案;)

谢谢,我尝试使用 Firebug 更改某个 facebook 的内容,然后单击信息选项卡,然后我所做的仍然“活着”-> 这不是整页请求
2021-03-27 14:43:10
他们可以使用客户端存储来加快速度吗?
2021-04-02 14:43:10
您使用哪种浏览器,在我的 Firefox (Mac) 中,这是我最终得到的 URL facebook.com/facebook?v=wall#!/facebook?v=info,绝对是历史哈希技术。
2021-04-11 14:43:10