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

由于我们的某些页面的工作原理,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”函数,你可以看到这种情况.

解决方法

如果你改变第58行

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

至

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

有用.我会尝试解释实际发生的事情：

>当窗口打开时,它最初具有以下URL：空白.您可以通过在onunload事件处理程序中记录w.location.toString()来检查此问题(请参阅下一步).
>在浏览器之后立即加载window.open中提供的URL,从而触发onunload关于：blank(第一次).
>具有不同window.document的实际页面被加载到弹出窗口中,但是您的事件处理程序仍在监听关于：空白页面的DOM根,因为您将事件添加到window.document而不是窗口;现在我们还有另外一个URL,window.document是完全不同于之前的一个对象.
>关闭窗口时,onunload会再次被触发(第二次),因为你的onunload事件被连接到窗口.

如果您为弹出窗口添加EventListener,则会从所有window.document-s接收事件,该事件将由于JS事件冒泡机制而在该窗口中加载.

我希望这回答你的问题.

原文地址：https://www.jb51.cc/js/152895.html