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

前端之家收集整理的这篇文章主要介绍了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事件冒泡机制而在该窗口中加载.

我希望这回答你的问题.

猜你在找的JavaScript相关文章