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

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

起初我认为这是Ajax,但我的问题是,如何更改地址栏而不重新加载? 我知道我可以改变锚(#墙)使用JS,但querystring(?V =墙),如何?

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

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

该function允许dynamic加载的页面在JS支持和非JS支持的用户代理之间正确加书签,交换等。 因为如果你作为一个JS用户将某人连接到?v=wall#!/facebook?v=info并且他们的浏览器不支持JS和XMLHttpRequest,那么这个页面将无法工作。 #! 也被用来作为search引擎的下载非AJAX版本的提示。

@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 

这有点意义, 因为这是如何使AJAX内容可以用Googlesearch引擎抓取 ,所以他们的浏览器也可以识别内容来自哪里。

更正的具体情况: Webkit浏览器正在显示缩短的URL Facebook要使用HTML 5的历史function, 你可以在这里看到的代码 (看看HistoryManager )在这种情况下,特别是他们使用.replaceState()来replaceURL你去了直接的可用。

注意:此答案可能稍后有效(WebKit特定位),因为其他浏览器支持越来越多的HTML5function,这可能会很快过时。

对于MooTools开发人员,我build议查看cpojer的mootools-history插件,它提供了对本机历史API的支持(如果可用),并回退到散列。

我没有Facebook,所以我不能检查。 但我95%确定它必须是一个完整的页面请求,地址栏是不可写的,因为这将是一个非常有用的function,以欺诈networking钓鱼网站(而不是http://fakeonlinebank.com重写为http:; // yourtrustybank )。 它可能是如此之快,您的浏览器似乎只加载该部分?

但是我很好奇,看看有人会纠正我,因为这意味着他们有你想要听到的答案;)