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

Posted 2023-03-05

【中文标题】facebook如何重写浏览器地址栏中页面的源URL？

【英文标题】：How does facebook rewrite the source URL of a page in the browser address bar?

【发布时间】：2011-04-20 11:16:14

【问题描述】：

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

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

【问题讨论】：

我看到很多投票和喜爱，但有人回答吗？

在浏览器标签中也有加载指示器。

@Snoob：给它一些时间，来吧。人们投票是因为他们也想知道答案……

在 Flickr 中也可以看到类似的行为。在 Flickr 中打开任何照片，您会在右侧看到照片集。单击照片集名称，地址栏值将更改，无需重新加载页面。

为你编辑了一个更好的英语...如果有错误我没看到请告诉我:)

【参考方案1】：

我没有 Facebook，所以无法查看。但我有 95% 的把握它必须是一个完整的页面请求，地址栏是不可写的，因为这对于网络钓鱼网站来说是一个非常有用的功能（而不是 http://fakeonlinebank.com 它重写为 http://yourtrustybank）。它可能太快了，以至于您的浏览器似乎只加载了那部分？

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

【讨论】：

谢谢，我尝试使用 Firebug 更改一些 facebook，然后单击信息选项卡，我仍然“活着” -> 这不是整页请求

他们是否可以使用客户端存储来加快速度？

您使用哪种浏览器，在我的 Firefox (Mac) 中，这是我最终得到的 URL facebook.com/facebook?v=wall#!/facebook?v=info，绝对是历史哈希技术。

【参考方案2】：

@Snoob - 如果您接受@bobince's answer，我将不胜感激，他首先在这里的具体细节是正确的。由于在它未被接受之前我无法删除/删除它，因此我将对其进行更新以使其尽可能正确。

---

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

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

Chrome 刚刚显示的地方：

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

这有点道理，given this is how you make AJAX Content crawlable with the Google search engine，所以他们的浏览器也能识别出内容的来源。

对细节的更正： Webkit 浏览器使用 html 5 历史功能 you can see the code here（查看 HistoryManager）显示 Facebook 想要的缩短 URL，在这种情况下，它们是使用.replaceState() 将您访问的网址替换为可用的直接网址。

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

【讨论】：

很棒的发现尼克。附带说明一下，它可能是 WebKit 特定的东西，因为它在 Safari 中的工作方式相同。

@anddoutoi - 我没有要测试的 Safari :) 我会更新以包括这个......并且请注意，随着其他人越来越多地支持 HTML5 位，这个答案可能很快就会过时。

有趣的是，在 Webkit 浏览器中查看新的 Twitter 设计不遵循我们在 Facebook 上看到的相同模式，即我仍然看到 /#!在 Twitter URL 中，但不在 Facebook URL 中。

#! 信息也很有用。我之前没有看到这被指定为标准的蜘蛛行为，希望其他引擎也能接受它。

@bobince - 还有其他搜索引擎吗？？

【参考方案3】：

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

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

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

【参考方案4】：

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