javascript - 将 DOMContentLoaded 监听器附加到动态创建的窗口

Question

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

但是在我的测试中，我无法将任何内容绑定(bind)到正在创建新窗口的父页面上的 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 事件一旦创建就不能直接绑定(bind)到窗口。它似乎触发了 onunload 事件两次(一次是在窗口打开时，一次是在窗口关闭时)。如果您在我的示例中使用 bindOnCreate 函数，就会看到这种情况。

Answer 1

如果您将第 58 行从

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

到

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

它有效。我将尝试解释幕后实际发生的事情:

• 当窗口打开时，它最初有 URL about:blank。您可以通过在 onunload 事件处理程序中记录 w.location.toString() 来检查这一点(请参阅下一步)。
• 浏览器立即加载 window.open 中提供的 URL，从而为 about:blank 触发 onunload(第一次)。
• 具有不同 window.document 的真实页面已加载到弹出窗口中，但您的事件处理程序仍在监听 about:blank 页面的 DOM 根目录，因为您已将事件添加到 window .document，不是window；现在我们加载了另一个 URL，window.document 是一个与之前完全不同的对象。
• 当您关闭窗口时，onunload 被再次(第二次) 触发，因为您的onunload 事件已连接到window .

如果您为弹出窗口的 window addEventListener，它将接收来自所有 window.document 的事件，这些事件将加载到该窗口内因为JS事件冒泡机制。

我希望这能回答您的问题。