Facebook 如何在不重新加载页面或使用 # 或的情况下更改浏览器地址栏中的 URL?
几个月前,我看到 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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
这就是 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
).如果您使用的是兼容 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
该网站是否在幕后使用 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.