我来帮你梳理几个可能的原因和对应的解决思路，毕竟我之前也碰到过类似的iframe加载PDF的坑：

• URL编码问题：这是最常见的原因！硬编码的PDF地址可能已经做了URL编码，但从OData获取的原始地址通常是未编码的，直接拼到Google Drive viewer的url参数里会导致解析错误。你需要对动态获取的PDF地址做URL编码处理：

  // 假设从OData拿到的原始PDF地址是rawPdfUrl
  const encodedPdfUrl = encodeURIComponent(rawPdfUrl);
  const pdfURL = `https://drive.google.com/viewerng/viewer?url=${encodedPdfUrl}&pid=explorer`;
  // 再把这个pdfURL赋值给iframe的src属性
  

• 跨域与CORS限制：虽然Google Drive viewer本身是用来跨域预览的，但如果你的PDF源服务器没有配置正确的CORS响应头，浏览器可能会拦截请求。打开浏览器的开发者工具-Console标签，看看有没有跨域相关的报错。如果是CORS问题，可以考虑：

  • 让PDF所在的服务器配置Access-Control-Allow-Origin允许Google Drive相关域名访问；
  • 用后端代理转发PDF请求，再将代理后的地址传给Google Drive viewer。

• URL参数缺失或格式不一致：对比你硬编码的URL和动态生成的URL，看看是否漏掉了pid=explorer这类参数（虽然不是必需，但部分场景下缺失会导致加载异常）。尽量保证动态生成的URL和能正常工作的硬编码URL结构一致。

• iframe属性配置问题：检查你的iframe标签是否有不合理的属性限制：

  • 确保设置了足够的width和height，避免因尺寸为0导致看起来空白；
  • 避免设置过于严格的sandbox属性，比如allow-same-origin可能会阻止跨域内容加载，可调整为sandbox="allow-scripts allow-top-navigation allow-forms"（按需配置）。
    示例iframe标签：

  <iframe id="pdf-iframe" width="100%" height="800px" frameborder="0"></iframe>
  

• 异步加载时序问题：如果是通过OData异步获取PDF地址，要确保在拿到有效URL后再设置iframe的src。如果提前渲染了iframe（此时src为空或无效），就会显示空白。比如用异步回调的方式设置src：

  // 模拟OData异步请求
  function getPdfFromOData() {
    return new Promise(resolve => {
      // 这里替换成你的OData调用逻辑
      setTimeout(() => resolve("你的OData返回的PDF地址"), 1000);
    });
  }
  
  getPdfFromOData().then(rawPdfUrl => {
    const encodedPdfUrl = encodeURIComponent(rawPdfUrl);
    const pdfURL = `https://drive.google.com/viewerng/viewer?url=${encodedPdfUrl}&pid=explorer`;
    document.getElementById('pdf-iframe').src = pdfURL;
  });
  

你可以先从检查URL编码和查看浏览器控制台报错入手，这两个能快速定位大部分问题。如果还是不行，把动态生成的URL复制到浏览器地址栏直接打开，看看是否能正常加载——如果能，那问题大概率出在iframe的配置或加载时序上；如果不能，那就是URL本身的问题。

内容的提问来源于stack exchange，提问作者B.Lim