回调窗口对象初始化（页面中动态包含 iframe）

Question

我需要什么： 我的要求是将脚本注入网页中显示的所有窗口。

我知道我们可以使用 window.frames 属性找到所有窗口，但在我的情况下这还不够，因为稍后可以通过 iframe 将新窗口添加到页面（将 iframe 包含到 DOM 中）

所以我需要一种机制来跟踪页面中的窗口，比如新窗口初始化时的回调。

我尝试了什么： 我使用 Object.observe API 来跟踪 window.frames 对象的变化。但我知道 Object.observe API 将根据此链接 (https://esdiscuss.org/topic/an-update-on-object-observe) 被删除。

那么，使用这个 API 好不好。或者如果有其他方法请告诉我

Answer 1

这是一种使用 MutationObserver API 的方法，您可以使用该 api 检测注入目标元素的任何元素，即使文本发生更改或元素被附加到目标树中的某处

function createIframeOnDemand(wait) {
  var iframe = document.createElement('iframe')
  iframe.src = 'about:blank';
    
  setTimeout(function() {
    document.body.appendChild(iframe)
  }, wait || 2000);
}


var body = document.body;

var observer = new MutationObserver(function(mutations) {
  for(mutationIdx in mutations) {
     var mutation = mutations[mutationIdx];
     for(childIndex in mutation.addedNodes) {
       var child = mutation.addedNodes[childIndex];
       
       if(child.tagName && child.tagName.toLowerCase() == 'iframe') {
         console.log(child);
         //child is your iframe element
         //inject your script to `child` here
       }
     }
  }
});

var config = { attributes: false, childList: true, characterData: false };
 
observer.observe(body, config);


createIframeOnDemand();