window.find无法检索网页内iframe文本，如何实现全页文本高亮搜索

现有代码的核心问题 #

• window.find()方法的作用域仅限当前顶层窗口的文档内容，默认不会遍历页面内嵌入的<iframe>节点的文档对象，所以无法识别iframe内的文本。
• 跨域iframe还会受同源策略限制，前端JS无权限访问其内部内容，这种场景下无法实现搜索，属于浏览器安全限制，没有绕开方案。
• 原生window.find()的高亮效果是浏览器临时渲染的，无法自定义样式，也不能持久化，达不到统一蓝色高亮的需求。

调整方案 #

兼容iframe搜索的基础实现 #

如果只需要实现搜索定位功能，直接遍历所有同源iframe，逐个调用对应iframe窗口的find方法即可：

function searchAllText(str, matchCase = false, wholeWord = false, searchBackward = false) {
  // 先搜索顶层主页面
  let hasMatch = window.find(str, matchCase, wholeWord, searchBackward);
  // 遍历所有iframe
  const iframes = document.querySelectorAll('iframe');
  for (const iframe of iframes) {
    try {
      // 只有同源iframe才能访问内部contentWindow
      const iframeWin = iframe.contentWindow;
      // 只要有一处匹配就标记为搜索到结果
      hasMatch = iframeWin.find(str, matchCase, wholeWord, searchBackward) || hasMatch;
    } catch (err) {
      // 跨域iframe无权限访问，直接跳过
      console.log('跨域iframe无法搜索：', err);
    }
  }
  return hasMatch;
}

自定义蓝色背景高亮实现 #

如果需要稳定的自定义蓝色高亮效果，需要配合Range API遍历文本节点实现：

const HIGHLIGHT_CLASS = 'custom-search-highlight';

// 初始化高亮全局样式
function initHighlightStyle() {
  if (document.querySelector(`style#${HIGHLIGHT_CLASS}`)) return;
  const styleEl = document.createElement('style');
  styleEl.id = HIGHLIGHT_CLASS;
  styleEl.textContent = `.${HIGHLIGHT_CLASS} { background: #1a73e8; color: #ffffff; }`;
  document.head.appendChild(styleEl);
  // 同步给所有同源iframe注入样式
  document.querySelectorAll('iframe').forEach(iframe => {
    try {
      iframe.contentDocument.head.appendChild(styleEl.cloneNode(true));
    } catch {}
  });
}

// 清除之前的高亮标记
function clearHighlight(root = document) {
  const highlightNodes = root.querySelectorAll(`.${HIGHLIGHT_CLASS}`);
  highlightNodes.forEach(node => {
    const parent = node.parentNode;
    parent.replaceChild(node.firstChild, node);
    parent.normalize();
  });
}

// 全文档（含同源iframe）高亮匹配文本
function highlightMatchText(str, root = document) {
  initHighlightStyle();
  if (!str.trim()) {
    clearHighlight();
    return;
  }
  // 先清理当前文档的旧高亮
  clearHighlight(root);
  // 遍历当前文档所有文本节点
  const treeWalker = document.createTreeWalker(
    root.body,
    NodeFilter.SHOW_TEXT,
    null,
    false
  );
  const matchTextNodes = [];
  let currentNode;
  while (currentNode = treeWalker.nextNode()) {
    if (currentNode.textContent.includes(str)) {
      matchTextNodes.push(currentNode);
    }
  }
  // 给匹配内容包裹高亮标签
  matchTextNodes.forEach(textNode => {
    const text = textNode.textContent;
    const startOffset = text.indexOf(str);
    if (startOffset < 0) return;
    const range = document.createRange();
    range.setStart(textNode, startOffset);
    range.setEnd(textNode, startOffset + str.length);
    const highlightSpan = document.createElement('span');
    highlightSpan.className = HIGHLIGHT_CLASS;
    range.surroundContents(highlightSpan);
  });
  // 递归处理所有同源iframe
  document.querySelectorAll('iframe').forEach(iframe => {
    try {
      highlightMatchText(str, iframe.contentDocument);
    } catch {}
  });
}

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