1

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

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

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

4

2 回答 2

2

正如您所说，history.pushState仅在现代浏览器上可用（尤其是 IE>=10）。

对于较旧的浏览器，以任何方式更改 URL 的唯一方法（据我所知）是使用“hashbang”技术- 使用/滥用 URL 中的哈希功能来保留页面信息。然后，您最终会得到一个类似于index.php#!page=x&foo=bar使用哈希表示当前页面的 URL。然后，该 URL 将与一个链接一一对应，例如index.php?page=x&foo=bar，在刷新页面时，JavaScript 可以读回哈希并适当地显示页面。这绝不是一个很好的解决方案，特别是浏览器没有正确存储您的历史记录，但它仍然很受欢迎。

如果您希望使用 Ajax 重新加载页面并同时更改 URL，那么也许可以查看History.js / Ajaxify 之类的库，它们将尝试在可用的pushState地方使用，但回退到在有的地方使用 hashbangs至。

您似乎认为 facebook 支持 Ajax for Legacy IE。我不知道这一点，因为我不能说 IE7 通常是我的首选浏览器，但 IIRC Twitter 用于旧的、功能较少的浏览器的时间要少得多，并且回退到一个非常简化的界面（我 认为它甚至使用基本的移动视图）。如果它是我的网站，我可能会采取类似的立场，并利用pushState可用的地方，并在没有的地方提供独立页面。在这些领域进行向后兼容性工作往往相当艰巨（尽管上述插件会减轻相当大的负担），除非您需要提供支持，否则可能不值得？

于 2013-08-20T07:52:24.867 回答
0

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

对于尚不支持 History API 的浏览器，Router 处理优雅的回退和对 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提到的文章。这可能是要走的路。

于 2013-08-20T07:53:13.760 回答