Javascript 将iframe注入到该帧之外的分页事件侦听器中

我遇到了一个问题，我想在单击按钮时加载一个iframe，方法是在body标记的末尾附加一个模态和iframe，函数如下：

function openDonateModal(){
if( document.querySelector('#donate-modal') != null){
    document.querySelector('#donate-modal').style.display = 'block';
} else{
   document.querySelector('body').innerHTML +=`
        <div id="donate-modal" onclick="this.style.display='none'">
                <iframe loading="lazy" src="someOtherSite.com">Loading...</iframe>
        </div>
    `
  }
}
document.querySelector('.donate-button').addEventListener('click', openDonateModal);

函数openDonateModal（）{ if（document.querySelector（“#捐赠模式”）！=null{ document.querySelector（“#捐赠模式”）.style.display='block'； }否则{ document.querySelector（'body'）.innerHTML+=` 加载。。。 ` } } document.querySelector（“.donate按钮”）.addEventListener（'click'，OpenDonateModel）； 每次页面刷新时，它只工作一次，之后它停止工作，我发现eventListener甚至不再连接到按钮

---

我认为这个问题与我在这里添加的侦听器无关，但似乎“取消连接”了页面上的所有侦听器，例如，下拉菜单不再工作。我已经证实这在Firefox和Chrome中都会发生。

经过更多的测试后，我发现这与修改body标签有关，我认为在技术上，添加body标签会用精确的HTML副本替换所有现有元素，但由于页面上的所有JS都没有重新执行，因此这些元素的EventListener丢失了

我的解决方案是让model的最外层div已经存在于DOM中，并重新编写它的内部html，而不是附加到整个主体中。这解决了按钮上eventListener的问题，并且没有中断站点上的其他功能