React&Electron中iframe的PDFViewerApplication访问返回undefined求助

嘿，这个问题我之前也碰到过，主要是两个常见原因导致的，我给你详细拆解下：

• 加载时机不对：你在ref回调里直接访问it.contentWindow.PDFViewerApplication时，iframe里的PDF阅读器（大概率是PDF.js）还没完成初始化。控制台之所以能显示这个属性，是因为控制台会实时更新对象的状态——你点开对象查看的时候，PDFViewerApplication已经被创建了，但代码执行的那个瞬间它还不存在，所以返回undefined。
• 同源策略限制（可能）：如果你的主页面和iframe里的PDF阅读器不在同一个域名下，浏览器的同源策略会阻止代码直接访问contentWindow里的属性，哪怕控制台能看到它。这种情况下即使等加载完成也拿不到，得先解决跨域问题。

1. 等iframe完全加载后再访问 #

最简单的办法是监听iframe的load事件，等内容加载完毕后再去获取PDFViewerApplication：

<iframe 
  ref={(it) => {
    if (!it) return;
    // 监听加载完成事件
    it.addEventListener('load', () => {
      // 这里再访问就大概率能拿到了
      console.log(it.contentWindow.PDFViewerApplication);
    });
  }} 
  src={`${reader}?file=`} 
  type="application/pdf"
/>

注意：如果PDF加载过程中涉及资源加载，load事件可能会触发多次，你可以加个标记避免重复执行逻辑，比如：

<iframe 
  ref={(it) => {
    if (!it || it._loaded) return;
    it._loaded = true;
    it.addEventListener('load', () => {
      console.log(it.contentWindow.PDFViewerApplication);
    });
  }} 
  src={`${reader}?file=`} 
  type="application/pdf"
/>

2. 排查并解决跨域问题 #

如果是跨域导致的，你需要确保主页面和PDF阅读器在同一域名下（包括协议、域名、端口都一致）。如果是本地开发用file://协议打开的页面，浏览器的同源限制会更严格，建议启动本地服务器（比如用create-react-app自带的dev server）以http://localhost开头的地址访问。

3. 用PDF.js的专属事件监听（更可靠） #

如果是用Mozilla官方的PDF.js阅读器，它提供了专门的初始化完成事件webviewerloaded，你可以通过postMessage来和主页面通信，这种方式即使跨域也能安全传递数据（只要配置好目标域名）：

主页面代码 #

<iframe 
  ref={(it) => {
    // 监听来自iframe的消息
    window.addEventListener('message', (event) => {
      // 验证消息来源（生产环境一定要指定具体域名，不要用*）
      if (event.origin !== '你的PDF阅读器域名') return;
      if (event.data.type === 'PDFViewerReady') {
        console.log('拿到PDFViewerApplication:', event.data.app);
      }
    });
  }} 
  src={`${reader}?file=`} 
  type="application/pdf"
/>

PDF阅读器页面代码（如果能修改的话） #

在PDF阅读器的HTML里添加这段脚本：

document.addEventListener('webviewerloaded', () => {
  // 向父页面发送初始化完成的消息
  window.parent.postMessage({
    type: 'PDFViewerReady',
    app: window.PDFViewerApplication
  }, '你的主页面域名'); // 生产环境替换成实际域名
});

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