检测 SPA 中的 URL 更改

Question

我想听听不是我维护的 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

这个/sf/answers/2927757241/为我完成了这项工作，令人难以置信的是我们在 2018 年仍然必须使用这些黑客。