如何检测 SPA 中的 URL 更改

Question

注意

解决方案应该是纯 Javascript - 没有外部库和框架。

---

在 SPA 中，一切都使用路由机制进行路由。 每当 url 的任何部分发生变化时，我都想听一听（不仅是哈希。我想检测的任何变化）

以下是 SPA 的示例，

https://www.google.in/
https://www.google.in/women 
https://www.google.in/girl 

现在，每当 url 从 https://www.hopscotch.in/ 更改为 https://www.hopscotch.in/women 时，我都想捕获该事件。

我试过了，

window.addEventListener("hashchange",function(event){
    console.log(this); // this gets fired only when hash changes
});

Answer 1

除了 Quentin 的回答：setInterval 是检查这些更改的一种非常糟糕的方法：它要么永远不会准时，要么被频繁解雇。

您真正应该做的是观察用户输入事件。 Click 是最明显的一种，但不要忘记 keyboard 输入。如果发生这些事件之一，则大多数情况下只需单击一下即可更改 url。因此，在代码中的快速模型中，它是：

let url = location.href;
document.body.addEventListener('click', ()=>{
    requestAnimationFrame(()=>{
      url!==location.href&&console.log('url changed');
      url = location.href;
    });
}, true);

（只需将其放入 Github 控制台即可查看）

与popstate 监听器一起，这对于大多数用例来说应该足够了。

Answer 2

在正常情况下，URL 发生变化时不会发生事件。您正在加载一个新文档（尽管您有 load 等）

如果您使用 JavaScript 设置新 URL（即使用 pushState），则没有事件，但您不需要事件，因为您已经明确地围绕它编写代码，所以您只需添加任何内容否则你需要那个代码。

如果 URL 通过浏览器后退按钮或类似按钮更改回您的 pushState 历史记录，您将获得 a popstate event。

---

因此，没有很好的通用方法来挂钩每个 SPA。最接近的方法是使用 setInterval 并检查 location.href 的值，看看它自上次检查以来是否发生了变化。

Answer 3

此脚本可让您检测 SPA 中 URL 的更改：

var previousUrl = '';
var observer = new MutationObserver(function(mutations) {
  if (location.href !== previousUrl) {
      previousUrl = location.href;
      console.log(`URL changed to ${location.href}`);
    }
});

observer.observe();

当你完成观察后，一定要取消观察者，使用上一个例子中的变量：

observer.disconnect();