检测 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 更改：

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