如何用MutationObserver替代setInterval检测DOM并移除广告iframe？

我的网站被广告商通过外部脚本插入了一个无ID的iframe，该iframe加载耗时较长。我希望它一出现就被立即移除。目前用setInterval每隔600ms检测一次，最多检测10次，检测到就移除并停止定时器，但出于性能考虑，想改用MutationObserver却未能成功实现。

现有可行的setInterval代码 #

var removeRun = 0;
intervalremove = setInterval(function () {
  removeRun += 1;
  if (removeRun === 10) {
    clearInterval(intervalremove);
  }

  if($("iframe[src*='//ad.adserver.cy']").length == 1) {
    console.log('dom contains adserver iframe');

    $("iframe[src*='//ad.adserver.cy']").remove();

    clearInterval(intervalremove);

    console.log('iframe removed / interval stoped');
  }
}, 600);

尝试失败的MutationObserver代码 #

// Select the node that will be observed for mutations
var target = document.querySelector("iframe[src*='csync.smartadserver.com']");

// Create an observer instance
var observer = new MutationObserver(function( mutations ) {
  mutations.forEach(function( mutation ) {
    var newNodes = mutation.addedNodes; // DOM NodeList
    if( newNodes !== null ) { // If there are new nodes added
      console.log('iframe found');
    });
  }
});    

// Configuration of the observer:
var config = { 
  attributes: true, 
  childList: true, 
  characterData: true 
};

// Pass in the target node, as well as the observer options
observer.observe(target, config);

// Later, you can stop observing
observer.disconnect();

正确的MutationObserver实现方案 #

失败原因分析 #

你之前的代码有两个核心问题：

1. 初始化时直接尝试选择目标iframe，但此时广告脚本还未插入该元素，导致target为null，无法启动监听。
2. 代码存在语法错误（闭合括号不匹配），导致逻辑无法正常执行。

修复后的实现代码 #

// 监听文档body节点（若知道广告iframe的固定父容器，可替换为更精准的节点）
const targetNode = document.body;

// 监听配置：仅关注子节点新增，开启subtree以捕获深层嵌套的节点插入
const observerConfig = {
  childList: true,
  subtree: true
};

// 创建观察者实例
const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    // 遍历所有新增节点
    mutation.addedNodes.forEach((node) => {
      // 匹配目标广告iframe
      if (node.tagName === 'IFRAME' && node.src.includes('ad.adserver.cy')) {
        console.log('检测到广告iframe，立即移除');
        node.remove();
        // 若只需要处理一次广告插入，可在此处停止监听
        // observer.disconnect();
      }
    });
  });
});

// 启动监听
observer.observe(targetNode, observerConfig);

// 如需主动停止监听，调用以下代码
// observer.disconnect();

关键说明 #

1. 监听范围：选择document.body作为监听目标，确保能覆盖广告脚本可能插入iframe的所有位置；如果知道广告iframe的固定父容器，替换成该容器能进一步提升性能。
2. subtree选项：必须开启此选项，否则无法监听到嵌套在深层DOM结构中的iframe插入事件。
3. 即时处理：一旦检测到目标iframe，立即调用remove()移除，相比定时器轮询能实现毫秒级的响应。

内容的提问来源于stack exchange，提问作者Lars Vegas