如何持续检测iframe内是否存在指定id或class的目标元素

前提说明 #

• 仅当iframe与父页面同域时可正常使用以下代码，跨域场景下浏览器同源策略会禁止父页访问iframe内部DOM
• 以下代码默认父页中iframe的id为targetIframe，可根据实际情况替换
• 示例中目标选择器为#targetInput，可按需替换为你要检测的id、class或者其他合法CSS选择器

方案1：MutationObserver 监听（推荐，性能更好） #

MutationObserver可以监听DOM树的动态变化，不需要高频轮询，性能开销极低，适合绝大多数场景。

// 监听iframe加载完成事件，每次iframe刷新都会自动触发该事件
document.getElementById('targetIframe').addEventListener('load', function() {
  const iframeDoc = this.contentDocument || this.contentWindow.document;
  const targetSelector = '#targetInput';

  // 先检查当前页面是否已经存在目标input
  const existInput = iframeDoc.querySelector(targetSelector);
  if (existInput) {
    console.log('目标input已存在，当前值为：', existInput.value);
    // 此处补充你拿到input值后的业务逻辑
  }

  // 创建DOM变化监听器
  const observer = new MutationObserver(function(mutations) {
    const foundInput = iframeDoc.querySelector(targetSelector);
    if (foundInput) {
      console.log('检测到目标input，当前值为：', foundInput.value);
      // 仅需检测一次的话可以在此处断开监听器，需要持续检测就保留注释
      // observer.disconnect();
      // 此处补充业务逻辑
    }
  });

  // 配置监听范围：监听整个body的子节点变化，包含深层嵌套节点
  observer.observe(iframeDoc.body, {
    childList: true,
    subtree: true
  });
});

方案2：轮询检测（降级兼容方案） #

如果需要兼容不支持MutationObserver的老旧浏览器，可以使用定时轮询的方案：

document.getElementById('targetIframe').addEventListener('load', function() {
  const iframeWin = this.contentWindow;
  const iframeDoc = this.contentDocument || iframeWin.document;
  const targetSelector = '#targetInput';
  // 轮询间隔可根据业务需求调整，单位为毫秒
  const checkInterval = 300;

  const checkTimer = setInterval(function() {
    const targetInput = iframeDoc.querySelector(targetSelector);
    if (targetInput) {
      console.log('检测到目标input，当前值为：', targetInput.value);
      // 仅需检测一次的话可以清除定时器，需要持续检测就保留注释
      // clearInterval(checkTimer);
      // 此处补充业务逻辑
    }
  }, checkInterval);

  // 可选：iframe卸载时清理定时器，避免内存泄漏
  iframeWin.addEventListener('beforeunload', function() {
    clearInterval(checkTimer);
  });
});

补充说明 #

如果需要实时获取input的输入变化，可以在检测到input后绑定input事件：

// 检测到目标input后添加以下代码
foundInput.addEventListener('input', function() {
  console.log('input值发生变化，最新值为：', this.value);
});

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