如何用原生JavaScript递归查找嵌套iframe链中的任意目标元素

核心逻辑是递归遍历所有层级的同域iframe文档，逐层级执行选择器匹配，不需要依赖任何第三方库。

核心实现代码 #

1. 查询首个匹配元素 #

function querySelectorDeep(selector, root = document) {
  // 先在当前层级文档查找
  const match = root.querySelector(selector);
  if (match) return match;

  // 遍历当前文档所有iframe，递归查找
  const iframes = root.querySelectorAll('iframe');
  for (const iframe of iframes) {
    try {
      // 跨域iframe访问会报错，直接跳过
      const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
      const nestedMatch = querySelectorDeep(selector, iframeDoc);
      if (nestedMatch) return nestedMatch;
    } catch (err) {
      continue;
    }
  }
  return null;
}

2. 查询所有匹配元素 #

function querySelectorAllDeep(selector, root = document) {
  let matches = Array.from(root.querySelectorAll(selector));

  const iframes = root.querySelectorAll('iframe');
  for (const iframe of iframes) {
    try {
      const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
      matches = matches.concat(querySelectorAllDeep(selector, iframeDoc));
    } catch (err) {
      continue;
    }
  }
  return matches;
}

使用方法 #

• 查找首个class为submit-btn的元素：const targetBtn = querySelectorDeep('.submit-btn')
• 查找所有p标签元素：const allPTags = querySelectorAllDeep('p')

限制说明 #

受浏览器同源策略约束，该实现只能查询同域iframe内的元素，跨域iframe无法直接访问内部DOM，如需支持跨域场景需要在iframe侧部署额外的跨域通信逻辑。

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