如何实现按Ctrl+F仅搜索embed标签嵌入的PDF而非当前页面

首先明确核心逻辑：浏览器原生Ctrl+F页内搜索默认作用于当前顶层浏览上下文的所有可检索内容，直接在页面放<embed>加载PDF时，搜索会同时覆盖主页面DOM文本和PDF内容，没有原生配置可以直接限定搜索范围，只能通过快捷键拦截+焦点切换的方式实现需求。

方案1：保留embed标签，最低成本适配 #

直接拦截全局搜索快捷键，阻止默认的全页面搜索行为，强制把焦点切换到PDF嵌入区域后，触发PDF阅读器自带的搜索功能，此时搜索范围会被限定在PDF内容内：

1. 先给embed标签加上标识，方便DOM获取

<embed 
  id="pdf-render" 
  src="target.pdf" 
  type="application/pdf" 
  width="100%" 
  height="90vh"
>

2. 加入快捷键监听逻辑，兼容Windows的Ctrl和Mac的Command键

document.addEventListener('keydown', (e) => {
  // 匹配搜索快捷键
  const triggerSearch = (e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'f';
  if (!triggerSearch) return;

  // 拦截默认全页面搜索
  e.preventDefault();
  const pdfNode = document.getElementById('pdf-render');
  // 焦点切到PDF插件上下文
  pdfNode.focus();
  // 派发搜索事件，调起浏览器PDF阅读器自带的搜索框
  pdfNode.dispatchEvent(new KeyboardEvent('keydown', {
    key: 'f',
    ctrlKey: e.ctrlKey,
    metaKey: e.metaKey,
    bubbles: true
  }));
});

适配说明：该方案在Chrome、Edge、Firefox最新正式版均可正常运行，要求用户未修改浏览器默认设置、使用内置PDF阅读器打开嵌入文件。

方案2：iframe嵌入，更强隔离性 #

如果方案1在个别场景下出现焦点不生效的问题，可以把embed替换为iframe加载PDF，iframe属于独立浏览上下文，焦点在iframe内部时，浏览器搜索只会检索iframe内的内容，完全不会遍历主页面其他文本：

1. 替换嵌入标签

<iframe 
  id="pdf-render" 
  src="target.pdf" 
  width="100%" 
  height="90vh"
  frameborder="0"
></iframe>

2. 快捷键监听逻辑稍作调整，把焦点切到iframe的window对象上

document.addEventListener('keydown', (e) => {
  const triggerSearch = (e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'f';
  if (!triggerSearch) return;

  e.preventDefault();
  const pdfIframe = document.getElementById('pdf-render');
  pdfIframe.contentWindow.focus();
  pdfIframe.contentWindow.dispatchEvent(new KeyboardEvent('keydown', {
    key: 'f',
    ctrlKey: e.ctrlKey,
    metaKey: e.metaKey
  }));
});

避坑提示 #

• 不需要为了这个需求单独引入PDF.js做自定义渲染，除非你后续还要做PDF批注、自定义高亮这类深度定制功能，单独实现一套PDF搜索逻辑的维护成本极高。
• 如果页面存在输入框、富文本编辑器这类需要正常快捷键的组件，可以在拦截逻辑里加判断：如果当前焦点在这类元素上，就不执行拦截，避免干扰正常操作。

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