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

问题描述:

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

Go to http://www.facebook.com/facebook?v=wall, then click on the info tab. The content will be loaded, and the address bar now becomes http://www.facebook.com/facebook?v=info but the webpage didn't reload.

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

At first I think it is Ajax, but my question is, how do you change the address bar without reloading? I know I can change anchor (#wall) using JS but querystring (?v=wall), how?

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

It's using HTML5's new history.pushState() feature to allow the page to masquerade as being at a different URL to that from which it was originally fetched.

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

This seems only to be supported by WebKit at the moment, which is why the rest of us are seeing ?v=wall#!/facebook?v=info instead of ?v=info.

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

The feature allows dynamically-loaded pages to be properly bookmarked, exchanged etc between JS-supporting and non-JS-supporting user agents. Because if you as a JS user linked someone to ?v=wall#!/facebook?v=info and their browser didn't support JS and XMLHttpRequest, the page wouldn't work for them. The #! is also used as a tip to search engines to download the non-AJAX version.