检测 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

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

Answer 2

现在大多数浏览器都支持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);