如何检测SPA中的URL更改

Question

注意

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

---

在SPA中,Everything使用路由机制进行路由.我只是想听到一个网址的任何部分发生变化(不仅是哈希.我想要检测的任何变化)

以下是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检查这些变化是一种非常糟糕的方式:它要么永远不准时,要么经常被解雇.

你真正应该做的是观察用户输入的事件.Click是最明显的一个,但不要忘记键盘输入.如果其中一个事件发生,它将主要只需要一个滴答来改变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

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

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

const config = {subtree: true, childList: true};
observer.observe(document, config);

完成观察后，请务必使用上一个示例中的变量取消观察者：

observer.disconnect();

Answer 3

通常情况下，URL更改不会发生任何事件。您正在加载新文档（尽管有load，依此类推）

如果您要使用JavaScript设置新的网址（即 pushState）那么就没有事件，但是您不需要事件，因为您已经在其中明确编写了代码，因此只需在代码中添加其他任何内容即可。

如果通过浏览器后退按钮或类似按钮通过pushState历史记录更改了URL，则将收到一个popstate事件。

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