更改 URL 后如何检测 HTML 页面是否完全重新加载？

Question

我目前正在开发 Chrome 扩展程序。我做了两种方法来监控 URL 的变化：

1. 使用变异观察者观察所有子元素的变化；
2. 检查window.location.href是否等于旧的href。

第一个正在工作，但它可能会花费太多调用，并且将来不容易扩展。第二个很简单，代码是：

var currentPage = window.location.href;
    setInterval(() => {
        if (currentPage != window.location.href) {
            currentPage = window.location.href;
            $(function() {
                myFunction(); //append some buttons inside the HTML
            });
        }
    }, 500);

但这不起作用，因为当它发现currentPage 已更改时，myFunction 将立即在旧 HTML 页面中附加按钮，因为新页面没有重新加载，但旧页面是。

我想知道是否有任何方法可以在此代码中稍作更改并使其正常工作，以便按钮正确附加到当前页面。

Answer 1

尝试DOMContentLoaded 事件在 DOM 加载后执行函数。

document.addEventListener('DOMContentLoaded', function(){
//your code for after the page is loaded
});