转到另一个url,无需重新加载页面

如果我去一个域的子path,正常的方法是做<a href="/somepath">Some Path</a> 。 这将完全重新加载页面。

但在Facebook上,当您打开一张照片时,地址栏上的url会发生变化,但整个页面不会重新加载,只会加载照片平台。 所以这样人们可以分享照片的url。 我想知道这是怎么做的?

我做了一些search,一些人build议使用history.pushState ,但是,这只适用于大多数现代浏览器。 Facebook上的那个也适用于IE 7,我想知道他们是怎么做到的?

正如你所说, history.pushState只适用于现代浏览器(注意IE> = 10) 。

对于旧的浏览器,唯一的方法(据我所知)以任何方式更改URL,是使用“hashbang”技术 – 使用/滥用URL中的哈希值来保留页面信息。 然后你会得到一个类似于index.php#!page=x&foo=bar的URL,其中哈希将被用来表示当前页面。 然后,URL将一个链接映射到一个链接,如index.php?page=x&foo=bar ,在刷新页面时,JavaScript可以读取哈希并适当地显示页面。 这绝不是一个很好的解决scheme,特别是浏览器不能正确存储你的历史,但它仍然很受欢迎。

如果您正在寻找使用Ajax来重新加载页面并同时更改URL,那么可以查看诸如History.js / Ajaxify之类的库,它将尝试在可用的情况下使用pushState ,但是回退到使用hashbang的地方不得不。

你似乎认为Facebook支持传统IE的Ajax。 我没有意识到这一点,因为我不能说IE7经常是我的浏览器,但是对于旧的,lessfunction的浏览器来说,IIRC Twitter的时间要less得多,而且可以回到简化的界面(我它甚至使用基本的移动视图)。 我可能会采取类似的立场,如果它是我的网站,并使用pushState哪里可用,并提供独立的网页,而不是。 在这些方面向后兼容的工作往往相当艰难(虽然上面提到的插件需要相当大的负载),除非你需要提供支持,也许这是不值得的?

我不知道,Facebook是怎么做到的,但是如果你看看Backbone.JS的“路由”一章,你会发现,

对于尚不支持历史loggingAPI的浏览器,路由器会处理正常回退并透明转换为URL的片段版本。

如果你看得更远,源代码说:

 // Backbone.History // ---------------- // Handles cross-browser history management, based on either // [pushState](http://diveintohtml5.info/history.html) and real URLs, or // [onhashchange](https://developer.mozilla.org/en-US/docs/DOM/window.onhashchange) // and URL fragments. If the browser supports neither (old IE, natch), // falls back to polling. 

这是提到的文章tohashchange 。 这可能是要走的路。