如何用JavaScript将PDF窗口选中的文本复制到另一窗口输入框？

首先明确：普通前端JavaScript无法直接跨独立窗口/跨域iframe获取PDF里的选中内容，核心限制来自两个方面：

为什么你的现有代码无法工作 #

• 同源策略限制：你嵌入的PDF来自第三方域名，浏览器禁止父页面访问跨域iframe的任何内容，包括选中文本。
• PDF渲染沙箱隔离：即使是同域PDF，浏览器内置的PDF查看器是运行在独立沙箱中的，父页面的JS无法直接调用window.getSelection()获取其中的选中内容。

可行的实现方案 #

根据你的场景，分两种情况给出解决方案：

情况1：两个窗口都是你可控的同域页面 #

如果PDF窗口和输入框窗口都是你自己的同域页面，可以通过以下方式实现：

1. 用PDF.js替代浏览器内置PDF渲染：PDF.js是开源的PDF渲染库，能把PDF渲染成普通HTML元素，这样你可以直接通过JS监听选中事件，获取选中的文本内容。
2. 用window.postMessage()跨窗口通信：在PDF渲染页面监听选中事件，当用户选中文本后，通过postMessage()把文本发送到输入框所在的窗口；输入框窗口监听message事件，接收文本并插入到聚焦的输入框中。

示例代码思路（PDF渲染页面）：

// 假设已用PDF.js渲染好PDF，监听选中事件
document.addEventListener('selectionchange', () => {
  const selectedText = window.getSelection().toString();
  if (selectedText) {
    // 发送到目标窗口（假设目标窗口的引用是targetWindow）
    targetWindow.postMessage({ type: 'PDF_SELECTION', text: selectedText }, 'https://your-domain.com');
  }
});

输入框页面：

window.addEventListener('message', (event) => {
  // 验证消息来源，避免恶意内容
  if (event.origin !== 'https://your-domain.com') return;
  if (event.data.type === 'PDF_SELECTION') {
    // 获取当前聚焦的输入框/文本域
    const activeEl = document.activeElement;
    if (activeEl.tagName === 'INPUT' || activeEl.tagName === 'TEXTAREA') {
      // 插入选中的文本到光标位置
      const start = activeEl.selectionStart;
      const end = activeEl.selectionEnd;
      activeEl.value = activeEl.value.substring(0, start) + event.data.text + activeEl.value.substring(end);
      // 调整光标位置到插入文本之后
      activeEl.selectionStart = activeEl.selectionEnd = start + event.data.text.length;
    }
  }
});

情况2：PDF窗口是第三方/浏览器直接打开的PDF #

这种情况下没有纯前端JS的解决方案，因为无法突破浏览器的安全限制。可以考虑两种替代方案：

• 引导用户使用原生复制粘贴（选中文本按Ctrl+C，再到输入框按Ctrl+V）；
• 开发浏览器扩展：浏览器扩展拥有跨标签页访问的权限，可以监听PDF标签页的选中事件，然后把文本插入到目标输入框中。

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