Question

注意

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

在SPA中，所有内容都使用路由机制进行路由。我甚至只想在网址的任何部分发生变化时都会听到（不仅是哈希。我想要检测的任何更改）

以下是SPA的例子，

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

现在每当网址从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

除了昆汀的回答：setInterval是检查这些变化的一种非常糟糕的方法：它要么永远不准时，要么经常被解雇。

您真正应该做的是观察用户输入事件。点击是最明显的一个，但不要忘记键盘输入。如果其中一个事件发生，它将主要只需要一个滴答来改变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设置新网址（即使用pushState），那么就没有活动，但您不需要，因为您已经明确地编写了代码围绕它，所以你只需要添加你需要的任何其他代码。

如果网址通过浏览器后退按钮或类似网址改变了您的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}`);
    }
});

如何检测SPA中的URL更改

注意

3 个答案: