如何通过 JavaScript 处理 URL 更改

Question

我知道在现代浏览器中我可以默默地更改 URL（无需重新加载页面），如下所示：

\n

window.history.pushState(\xe2\x80\x9cobject or string\xe2\x80\x9d, \xe2\x80\x9cTitle\xe2\x80\x9d, \xe2\x80\x9c/new-url\xe2\x80\x9d);\n

\n

但我希望能够检测 URL 的变化。当用户在地址栏中输入新的 URL 时，如何处理该事件并防止页面重新加载？

\n

PS我知道我可以使用onhashchange，但我只是不想使用哈希:)

\n

Answer 1

正如事件中所述，当 window.location.href 更改时，如果不进行轮询是不可能的。那是 2010 年。也许与此同时，有针对 HTML5 浏览器的解决方案。

也许您已经知道不使用hashchange在服​​务器端、爬行、404 检测等方面存在缺陷。

但使用哈希值也有缺点，特别是当涉及到通过邮件发送的深层链接时（重定向不传输哈希值，通常由网络邮件客户端用来获得干净的引用者）。

我建议使用经过测试的 url 路由和历史 API 库。我确信您可以在microjs.com、JSter或JSDB.IO找到一个。有许多可以在禁用的浏览器（例如 MSIE）上进行优雅的回退。

我最好的选择是history.js和Crossroads.js（使用Hasher）。

如果您已经使用了 Backbone.js、AngularJS、Ember 等 MVC 框架，您将免费获得您想要的东西。

毕竟，我不太确定这些库中的任何一个是否能够在location.href更改时抑制（单个）页面的重新加载。由于你失去了大部分状态，我会使用#hashes。恕我直言，单页应用程序的用户不应更改浏览器位置，而应使用应用程序的导航选项。