javascript - 回调窗口对象初始化(在页面中动态包含 iframe)

Question

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

我知道我们可以使用 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 检测注入(inject)到目标元素中的任何元素，即使文本发生更改或元素附加到目标树中的某处也是如此

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();