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

Question

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

起初我认为它是Ajax,但我的问题是,如何在不重新加载的情况下更改地址栏？我知道我可以使用JS更改锚点(#wall)但是querystring(？v = wall),怎么样？

Answer 1

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

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

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

Answer 2

@Snoob - 如果你接受了@ bobince的答案,我会很感激,他在这里首先谈论具体细节.由于我无法删除/删除它,直到它被取消,我将更新它以尽可能正确.

目前它是一个WebKit(Chrome,Safari等)特定的东西你正在看到(或者更确切地说,没有看到),正如@ bobince在其他浏览器中指出的那样,你可以看到栏中的真实 URL:

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

Chrome只显示:

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

这有点意义,因为这是您使用Google搜索引擎抓取AJAX内容的方式,因此他们的浏览器也会识别内容的来源.

更正细节: Webkit浏览器显示缩短的URL facebook想要使用HTML 5历史记录功能,你可以在这里看到代码(看看HistoryManager)在这种情况下,特别是他们.replaceState()用来替换你去过的URL直接一个可用.

注意:此答案可能在以后无效(WebKit特定位),因为其他浏览器越来越多地支持HTML5功能,这可能会很快过时.