将DOMContentLoaded侦听器附加到动态创建的窗口

Question

由于我们的一些页面如何工作,JS可以随时注入页面,有时这个JS会关闭当前窗口.问题是我需要将一个事件监听器附加到窗口的onunload,以便可以从窗口返回一个值到父页面.但是因为窗口关闭脚本可能在任何时候被注入,我无法将此事件绑定到onload,因为它的工作方式因此我希望使用DOMContentLoaded,因为该事件将在注入的脚本之前触发.

但是在我的测试中,我无法在创建新窗口的父页面上绑定到DOMContentLoaded.

以下是我目前正在使用的内容:Plunker

我们目前只需要在Chrome中使用它.

我们当前的这种方法就像这样(伪代码):

onButtonClick = function(){
    win = window.open(...);
    win.onload = function(){
        win.onunload = function(){
            //Bind some function that will get the window's "return value" and pass it to the parent page
            //This will never happen if the window closes itself before the page is done loading
        };
    };
};

我可以使用DOMContentLoaded来完成我想要的吗？如果是这样,我该如何正确地将它附加到窗口？

注意:创建后,我无法将"onunload"事件直接绑定到窗口.它似乎两次触发"onunload"事件(一旦窗口打开,一次关闭时).如果在我的示例中使用"bindOnCreate"函数,则可以看到这种情况.

Answer 1

如果您更改第58行

w.document.addEventListener('DOMContentLoaded', ...)

至

w.addEventListener('DOMContentLoaded', ...)

有用.我会试着解释一下实际发生的事情:

• 当窗口打开时,它最初具有URL about:blank.您可以通过登录检查这w.location.toString()在onunload事件处理程序(见下一步).
• 紧接着浏览器加载供给在URL window.open,因此引发onunload了about:blank (第一次).
• 具有不同window.document的真实页面被加载到弹出窗口中,但是您的事件处理程序仍在侦听about:blank页面的DOM根,因为您添加了事件window.document,而不是window; 现在,因为我们有另一个URL加载,window.document是一个完全不同的对象,而不是之前的一步.
• 当您关闭窗口时,onunload会再次触发(第二次),因为您的onunload事件已连接到窗口.

如果您addEventListener使用弹出窗口window,它会接收来自所有window.document-s的事件,这些事件将由于JS事件冒泡机制而被加载到该窗口中.

我希望这回答了你的问题.