Question

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

我知道我们可以通过使用window.frames属性找到所有窗口，但这在我的情况下是不够的，因为新的窗口可以通过iframe在ifmes后面添加到页面中（将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来检测注入你的目标元素的任何元素，即使文本被更改或元素被追加到目标树的某个地方

＆＃13;

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

＆＃13;

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

1 个答案: