标签：javascript asynchronous mutation-observers window-open

我想使用MutationObserver跟踪我使用window.open创建的窗口中的DOM更改.我有以下代码：

var newWin = window.open('/somepath');
var observerConfig = {
    childList: true,
    subtree: true,
    attributes: false,
    characterData: false
};
var obs = new newWin.MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        if (!mutation.addedNodes) return;
        mutation.addedNodes.forEach(function(addedNode) {
            console.log(addedNode);
        });
    })
});
obs.observe(newWin.document, observerConfig);

我希望在控制台中看到一些新添加的节点(正如我以同样的方式跟踪原始窗口,同一个观察者),但我得不到任何结果.我错过了什么吗？

解决方法:

这与使用JavaScript(例如来自< head>中的脚本)在加载DOM之前修改当前文档的DOM时会遇到的问题相同：您将尝试访问不存在的元素在此时的记忆中.

您可以使用DOMContentLoaded事件在DOM加载并准备好操作时触发回调.

同样,当您尝试访问新窗口的DOM时,该窗口可能尚未完成加载.

您应该在加载事件侦听器中包装obs.observe调用：

newWin.addEventListener('load', function() {
    obs.observe(newWin.document.body, observerConfig);
}, true);

这样当你开始观察身体时,你确定它确实存在！

标签：javascript,asynchronous,mutation-observers,window-open
来源： https://codeday.me/bug/20190701/1348050.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。