Facebook 如何在不重新加载页面或使用 # 或的情况下更改浏览器地址栏中的 URL？

Posted 2023-02-22

【中文标题】Facebook 如何在不重新加载页面或使用 # 或的情况下更改浏览器地址栏中的 URL？

【英文标题】：How does Facebook change the URL in the browser's address bar without page reload or use of # or?

【发布时间】：2011-10-11 06:17:18

【问题描述】：

几个月前，我在 vkontakte.ru（俄罗斯 FB）上看到了一项新功能： 在用户页面之间移动时，不会发生浏览器重新加载。相反，新页面会被预加载，然后显示。页面上的音乐播放器（固定在页脚顶部）会不间断地播放。

但是，浏览器地址栏中的 url 会发生变化，而不是通过哈希标记或查询字符串。

所以，我的页面是 vk.com/myPage... 我点击一个朋友，他的页面预加载，然后显示在浏览器地址栏中的 URL 更改为 vk.com/myfriendJoe 时，不会发生浏览器重新加载.

请注意，它仅适用于最新版本的浏览器，如更高版本的 Safari 和 Chrome，对于其他浏览器，如 Firefox 3.6，它实现了使用主题标签和查询字符串的后备。

我做了一些研究，发现了window.history.pushState，但它似乎只适用于查询字符串。

任何想法将不胜感激。谢谢。

【问题讨论】：

spoiledmilk.dk/blog/…

【参考方案1】：

如果您使用的是兼容 html5 的现代浏览器，则可以使用 history.pushState() API。

更多：https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history

【参考方案2】：

网站是否在后台使用 ajax 调用来用新内容重新填充页面的某些部分？这是不更改网址的一种方式。

【参考方案3】：

这就是 HTML5 定义的新 history API。你可以看到另一个演示here。你说得对，是 pushState 做到了，但它不只适用于查询字符串（如该页面所示，它使用像 /history/first 和 /history/second 这样的有根相对 URL )。