如何限制浏览器CTRL+F仅在iframe内搜索pdfium渲染的PDF？

这个问题确实挺常见的——浏览器原生的Ctrl+F/Cmd+F是针对整个页面文档的，不管你有没有聚焦到iframe，都会全局搜索。要把搜索范围限定在PDFium渲染的iframe里，最靠谱的方式就是拦截原生快捷键，实现自定义搜索功能，下面给你具体的实现思路：

第一步：拦截全局搜索快捷键 #

首先要阻止浏览器默认的全局搜索行为，当用户按下Ctrl+F（Windows/Linux）或Cmd+F（Mac）时，触发我们自己的搜索逻辑。可以在主页面或者iframe内部添加键盘事件监听：

document.addEventListener('keydown', (e) => {
  // 判断是否是搜索快捷键
  const isSearchKey = (e.ctrlKey || e.metaKey) && e.key === 'f';
  if (isSearchKey) {
    e.preventDefault(); // 阻止浏览器默认搜索弹窗
    e.stopPropagation(); // 避免事件冒泡
    // 触发自定义搜索逻辑，比如打开搜索框
    triggerCustomSearch();
  }
});

第二步：针对PDFium渲染内容实现自定义搜索 #

因为PDFium是把PDF渲染成了可访问的DOM元素（比如<div>、<span>包裹的文本），所以我们可以直接操作iframe内的DOM来实现搜索：

核心逻辑要点： #

• 遍历文本节点：遍历iframe中所有包含文本的节点，匹配目标关键词
• 高亮匹配内容：用<mark>标签包裹匹配到的文本，注意保存原节点结构，避免破坏样式
• 搜索导航：实现“下一个/上一个”跳转功能，定位到匹配的高亮元素

示例代码（假设在iframe内部执行，或者通过iframe.contentDocument访问）：

let currentMatchIndex = -1;
let matches = [];

function triggerCustomSearch() {
  const searchTerm = prompt('请输入搜索内容：'); // 也可以用自定义的搜索输入框
  if (!searchTerm) return;

  // 先清除之前的高亮
  clearHighlights();

  // 遍历所有文本节点，收集匹配项
  const textNodes = getAllTextNodes(document.body);
  matches = [];

  textNodes.forEach(node => {
    const text = node.textContent;
    const regex = new RegExp(searchTerm, 'gi');
    let match;
    while ((match = regex.exec(text)) !== null) {
      matches.push({ node, start: match.index, length: searchTerm.length });
    }
  });

  // 高亮所有匹配项
  highlightMatches();

  // 定位到第一个匹配项
  if (matches.length > 0) {
    currentMatchIndex = 0;
    scrollToMatch(currentMatchIndex);
  } else {
    alert('未找到匹配内容');
  }
}

// 辅助函数：获取所有文本节点
function getAllTextNodes(element) {
  const nodes = [];
  const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT, null, false);
  let node;
  while ((node = walker.nextNode())) {
    if (node.textContent.trim().length > 0) {
      nodes.push(node);
    }
  }
  return nodes;
}

// 辅助函数：高亮匹配项
function highlightMatches() {
  matches.forEach(({ node, start, length }) => {
    const parent = node.parentNode;
    const text = node.textContent;
    // 拆分文本节点，插入高亮标签
    const beforeText = text.slice(0, start);
    const matchText = text.slice(start, start + length);
    const afterText = text.slice(start + length);

    const beforeNode = document.createTextNode(beforeText);
    const highlightNode = document.createElement('mark');
    highlightNode.textContent = matchText;
    highlightNode.style.backgroundColor = 'yellow'; // 自定义高亮样式
    const afterNode = document.createTextNode(afterText);

    parent.replaceChild(beforeNode, node);
    parent.insertBefore(highlightNode, beforeNode.nextSibling);
    parent.insertBefore(afterNode, highlightNode.nextSibling);
  });
}

// 辅助函数：清除高亮
function clearHighlights() {
  const marks = document.querySelectorAll('mark');
  marks.forEach(mark => {
    const parent = mark.parentNode;
    parent.replaceChild(document.createTextNode(mark.textContent), mark);
    parent.normalize(); // 合并相邻文本节点
  });
}

// 辅助函数：滚动到指定匹配项
function scrollToMatch(index) {
  if (index < 0 || index >= matches.length) return;
  const { node } = matches[index];
  // 这里需要注意，原节点可能已经被拆分，所以要找对应的高亮元素
  const highlightElement = node.parentNode.querySelector('mark') || node;
  highlightElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
  // 可以给当前匹配项添加特殊样式，比如加深背景色
  highlightElement.style.backgroundColor = 'orange';
  // 清除之前的特殊样式
  if (currentMatchIndex !== -1 && currentMatchIndex !== index) {
    const prevHighlight = matches[currentMatchIndex].node.parentNode.querySelector('mark') || matches[currentMatchIndex].node;
    prevHighlight.style.backgroundColor = 'yellow';
  }
  currentMatchIndex = index;
}

// 可以添加下一个/上一个的快捷键监听，比如Ctrl+G/Cmd+G和Ctrl+Shift+G/Cmd+Shift+G
document.addEventListener('keydown', (e) => {
  if (matches.length === 0) return;
  // 下一个
  if ((e.ctrlKey || e.metaKey) && e.key === 'g') {
    e.preventDefault();
    currentMatchIndex = (currentMatchIndex + 1) % matches.length;
    scrollToMatch(currentMatchIndex);
  }
  // 上一个
  if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key === 'g') {
    e.preventDefault();
    currentMatchIndex = currentMatchIndex === 0 ? matches.length - 1 : currentMatchIndex - 1;
    scrollToMatch(currentMatchIndex);
  }
});

额外注意事项 #

• 跨域问题：如果iframe和主页面不同域，直接访问iframe.contentDocument会有跨域限制，这时候需要把搜索逻辑放在iframe内部的脚本中，主页面只负责拦截快捷键并向iframe发送消息（用postMessage），iframe接收消息后触发搜索。
• PDFium渲染结构：不同的PDFium渲染库可能生成的DOM结构不同，你需要根据实际的DOM结构调整文本节点的遍历逻辑，比如有些库会把每页PDF放在单独的<div>里，遍历的时候可以针对性处理。
• 性能优化：如果PDF页数很多，遍历所有文本节点可能会有性能问题，可以考虑分页搜索，只遍历当前可见的页面，或者做防抖处理。

这样实现后，用户按下Ctrl+F就只会在iframe内的PDF内容中搜索，完全替代了浏览器的原生全局搜索行为，体验上和原生搜索差不多，还能自定义高亮样式和导航逻辑。

内容的提问来源于stack exchange，提问作者user-17171