弹出窗口刷新后如何从父窗口访问弹出 DOM？答案

【问题标题】：How to access the popup DOM from the parent window after the popup refreshes itself?弹出窗口刷新后如何从父窗口访问弹出 DOM？
【发布时间】：2015-11-19 00:50:51
【问题描述】：

我有一个打开弹出窗口的父页面。

我可以从父级访问弹出窗口的 DOM，但在弹出窗口刷新后，我无法再访问它（未收到按钮上的点击事件）。

我的代码示例：

var popup = window.open('http://d.com/popup.html', 'my_popup', 'width=1200px, height=800px');
popup.window.addEventListener('load', function(){
    var myButton = popup.window.document.getElementById('myButton');
    myButton.addEventListener('click', function(){
      console.log("click");
    })
});

在弹出窗口必须自行刷新之前，一切正常：/

有什么想法吗？

【问题讨论】：

如果你愿意使用 jQuery，那么on() 函数会帮助你：你面临的问题（如果我理解正确的话）是你正在访问一个以前不存在的对象（因为它仅在重新加载后创建）。不过，我现在不能帮你玩 JS。
弹出窗口如何自行刷新？是直接弹出窗口还是父窗口？
弹出窗口自行刷新（不幸的是，这是一个遗留代码，更改起来很复杂）

标签： javascript

【解决方案1】：

您遇到的问题是，正如 Burki 之前在 cmets 上所说，当您的弹出窗口重新加载时，myButton 对象被重新创建，并且您之前添加的 eventListener 不再连接到他。

您最好的选择可能是将 eventListener 代码移动（如果可能）到 popup.html 页面，因为它会在每次重新加载弹出窗口时执行。

也许使用 jQuery 的 .on() 方法来绑定两个 eventListener 也会有所帮助，尽管在这种情况下我不能 100% 确定这一点。

检查弹出窗口重新加载时页面中的加载事件代码是否正在触发

【讨论】：

我认为负载也不会触发，因为那样它只会找到新按钮并再次附加事件。
@AtheistP3ace，你是对的，加载事件不会在父页面中第二次触发。目前我已经按照 Bardo 的建议将代码移到了弹出窗口中，但我不喜欢这个解决方案，因为弹出窗口在其他地方使用。