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

go to another url without reloading page

本文关键字：加载 新加载 另一个 url      更新时间：2023-09-26

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

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

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

正如您所说，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，在不可用的地方只提供独立页面。在这些领域进行向后兼容性的工作往往相当困难（尽管上面提到的插件会减少相当大的工作量），除非你需要提供支持，否则这可能不值得？

我不知道，facebook是怎么做到的，但如果你在Backbone.JS的"路由"一章中查看，你会发现，

对于还不支持历史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提到的文章。这可能是要走的路。

相关文章：