Firefox加载同源PDF的iframe时抛出跨源错误问题

问题原因 #

Firefox 内置的 PDF 阅读器基于 PDF.js 实现，会将 PDF 渲染在沙箱隔离的 iframe 上下文中——即便 PDF 与父页面同源，父页面也无法访问该 iframe 的 contentDocument 或 contentWindow.document，这是 Firefox 的安全策略设计，与 Chrome 的实现逻辑不同：

• Chrome 允许父页面访问同源 PDF 所在 iframe 的文档对象
• Firefox 则会在 PDF 加载完成后，限制父页面对 iframe 内部文档的访问，表现为 contentDocument 返回 null，访问 contentWindow.document 直接抛出 SecurityError/DOMException

解决方案 #

方案一：修改 iframeReady 函数兼容 Firefox #

针对 Firefox 的特殊表现，修改原有的 iframe 加载检测逻辑，加入异常捕获与 null 值判断，即可准确检测 PDF 加载完成：

function iframeReady(iframe, fn) {
  let hasTriggered = false;
  checkLoaded();

  function checkLoaded() {
    if (hasTriggered) return;
    try {
      const doc = iframe.contentDocument || iframe.contentWindow?.document;
      if (doc) {
        if (doc.URL.indexOf("about:") !== 0) {
          // Chrome/Edge 等浏览器：正常监听 DOMContentLoaded
          doc.addEventListener("DOMContentLoaded", fn);
          hasTriggered = true;
        } else {
          // 仍为初始的 about:blank，继续轮询
          setTimeout(checkLoaded, 100);
        }
      } else {
        // Firefox 特征：PDF 加载后 contentDocument 为 null
        fn();
        hasTriggered = true;
      }
    } catch (e) {
      // Firefox 特征：访问文档对象抛出安全异常
      if (e.name === "SecurityError" || e.name === "DOMException") {
        fn();
        hasTriggered = true;
      } else {
        // 其他异常，继续轮询
        setTimeout(checkLoaded, 100);
      }
    }
  }
}

逻辑说明：

1. 加入 hasTriggered 标记，避免回调重复执行
2. 捕获访问 iframe 文档对象时的安全异常，判定 PDF 已加载（Firefox 场景）
3. 检测到 contentDocument 为 null 时，直接触发回调（Firefox 另一种表现）
4. 保留原有逻辑兼容 Chrome 等浏览器

方案二：直接监听 iframe 的 load 事件（简化版） #

如果不需要精准区分 DOM 加载完成时机，仅需检测 PDF 加载完成，可直接监听 iframe 的 load 事件，结合标记过滤初始的 about:blank 加载：

const iframe = document.getElementById('pdfIframe');
let isLoaded = false;

iframe.addEventListener('load', () => {
  if (!isLoaded) {
    // 跳过初始 about:blank 的 load 事件
    isLoaded = true;
    // 延迟执行，确保 Firefox 中 PDF 已完全渲染
    setTimeout(() => {
      console.log('iframe loaded');
    }, 100);
  }
});

方案三：直接使用 PDF.js 渲染（需操作 PDF 内容时） #

如果需要对 PDF 内容进行交互操作，建议直接引入 PDF.js 库在页面中渲染 PDF，完全规避浏览器 iframe 沙箱限制，实现更灵活的控制。

注意事项 #

• Firefox 的沙箱限制是有意为之的安全设计，目的是隔离 PDF 渲染环境与父页面，降低恶意 PDF 的攻击风险
• 同源策略在不同浏览器中的表现存在差异，需针对目标浏览器做兼容处理

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