检测 SPA 中的 URL 更改

Question

我想听听 SPA 中的路径更改，该 SPA 不是由我维护的。

我在这里找到了一个解决方案：https://stackoverflow.com/a/44819548/7042552

但是，对我来说这似乎有点“hacky” - 但我的实现仍然是这样的：

let url = window.location.href;

['click','popstate', 'onload'].forEach( evt =>
        window.addEventListener(evt, function () {
            requestAnimationFrame(()=>{
                if (url !== location.href) {
                    // do stuff
                }
                url = location.href;
            });
        }, true)
    );

是否有更好或更通用的方法来监听 SPA 中的页面加载？

Answer 1

现在大多数浏览器都支持 MutationObserver，您可以使用这样的代码来检测 SPA 中的 URL 更改：

let previousUrl = '';
const 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);

Answer 2

这 https://stackoverflow.com/a/41825103/7042552 为我完成了这项工作，令人难以置信的是我们在 2018 年仍然必须使用这些黑客。

Answer 3

在此处查看答案：如何在 JavaScript 中检测哈希后 URL 是否已更改。

问题询问哈希更改，但答案涉及所有 URL 更改