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

发布于 2024-11-25 21:27:58 字数 458 浏览 0 评论 0原文

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

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

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

请注意,它仅适用于最新版本的 Safari 和 Chrome 等最新浏览器,对于 Firefox 3.6 等其他浏览器,它实现了使用主题标签和查询字符串的回退。

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

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

A couple of months ago I saw a new feature deployed on vkontakte.ru (russian FB):
when going between users pages, no browser reload happens. Instead, the new page gets preloaded, and then displayed. The music player that’s on the page (it’s anchored on top of the footer) keeps playing, uninterrupted.

However, the url in browser address bar changes, and not by means of a hash tag or a query string.

So, my page is vk.com/myPage... I click a friend, his page preloads, then gets displayed at which time the URL in browser address bar changes to vk.com/myfriendJoe, and no browser reload happens.

Note that it only works with the newest browsers like later versions of Safari and Chrome, for others like Firefox 3.6 it implements a fallback that uses hashtags and query strings.

I did some research and found window.history.pushState, but it only seems to work with query strings.

Any ideas would be greatly appreciated. Thank you.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

江城子 2024-12-02 21:27:58

这就是 HTML5 定义的新 history API。您可以在此处查看另一个演示。你说得很对,是 pushState 做到了这一点,但它只适用于查询字符串(如该页面所示,它使用像 这样的根相对 URL >/history/first/history/second)。

That's the new history API defined by HTML5. You can see another demo here. You're quite right that it's pushState that does it, but it doesn't just work with query strings (as that page demonstrates, it's using rooted relative URLs like /history/first and /history/second).

孤芳又自赏 2024-12-02 21:27:58

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

更多信息请参见:https://developer.mozilla.org/en/DOM/Manipulated_the_browser_history

If you're using a modern HTML5 compliant browser, you can use the history.pushState() API.

More here: https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history

未央 2024-12-02 21:27:58

该网站是否在幕后使用 ajax 调用来用新内容重新填充页面的某些部分?这是不更改 url 的一种方法。

Is the site using ajax calls behind the scenes to repopulate certain section of the page with new content? That is one way of not changing the url.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文