Question

如果我转到域的子路径，通常的方法是<a href="/somepath">Some Path</a>。这将完全重新加载页面。

但在Facebook上，当您打开照片时，地址栏上的网址会发生变化，但整个页面不会重新加载，只会加载照片平台。所以通过这种方式，人们可以分享照片的网址。我想知道这是怎么做到的？

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

Answer 1

正如您所说，history.pushState仅适用于modern browsers (noteably IE>=10)。

对于旧浏览器，以任何方式更改网址的唯一方法（据我所知）是使用"hashbang" technique - 使用/滥用网址中的哈希功能来保留网页信息。然后，您最终得到一个类似于index.php#!page=x&foo=bar的URL，其中哈希将用于表示当前页面。然后，URL将使用index.php?page=x&foo=bar等链接进行一对一映射，并且在刷新页面时，JavaScript可以回读散列并适当地显示页面。这绝不是一个很好的解决方案，特别是浏览器无法正确存储您的历史记录，但它仍然非常受欢迎。

如果您希望使用Ajax重新加载页面并同时更改URL，那么可能会查看History.js / Ajaxify等库，这些库将尝试使用{{1在可用的地方，但回到使用hashbangs所必需的地方。

您似乎认为facebook支持Legacy IE的Ajax。我不知道这一点，因为我不能说IE7经常是我的首选浏览器，但是IIRC Twitter用于较旧的，功能较少的浏览器的时间要少得多，并且回归到一个简化的界面（I < em>想想它甚至使用基本的移动视图）。如果它是我的网站，我可能会采取类似的立场，并在可用的情况下使用pushState，并且只提供不在的独立页面。在这些方面进行向后兼容性的趋势是相当艰巨的（尽管上面提到的插件将需要相当大的负载），除非你需要提供支持，否则它可能不值得吗？

Answer 2

我不知道facebook是怎么做到的，但如果你查看Backbone.JS的“路由”章节，你会看到，

对于尚不支持History API的浏览器，路由器处理优雅的后备和透明转换为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.

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

转到另一个网址而不重新加载页面

2 个答案: