Firefox中iframe跨域对象print属性访问被拒求助（Chrome正常）

这个问题我之前也碰到过，Firefox对跨域（甚至部分同域场景下的内置PDF查看器）的iframe内容访问限制确实比Chrome要严格。你现在的代码在Chrome里能跑是因为Chrome的同源策略实现对同域PDF的contentWindow访问更宽松，但Firefox会因为同源策略拦截你调用contentWindow.print()，尤其是当PDF被内置的PDF查看器处理时，会被视为跨域对象。

下面给你几个可行的解决方案：

方案1：直接打开PDF新窗口并打印 #

绕过iframe的跨域限制，直接用window.open打开PDF文件，然后在新窗口触发打印：

<button type="button" class="btn btn-default" onclick="printPDF()">Print</button>
<script>
function printPDF() {
  const pdfWindow = window.open('myfile.pdf', '_blank');
  pdfWindow.onload = function() {
    pdfWindow.print();
    // 可选：打印后自动关闭窗口（根据需求调整延迟时间）
    setTimeout(() => pdfWindow.close(), 1000);
  };
}
</script>

这个方法的好处是简单，不需要额外依赖，主流浏览器都能正常工作。新打开的PDF窗口如果和当前页面同域，完全不受限制；即使跨域，按钮点击本身属于用户交互，也能触发打印（部分浏览器可能需要用户确认，但体验影响不大）。

方案2：用embed标签替代iframe #

Firefox对embed标签处理PDF的方式更友好，尝试把iframe换成embed后再访问其contentWindow：

<embed src="myfile.pdf" style="width: 96%; height:500px;" id="pdfEmbed" type="application/pdf">
<button type="button" class="btn btn-default" onclick="printPDF()">Print</button>
<script>
function printPDF() {
  const embed = document.getElementById('pdfEmbed');
  if (embed.contentWindow) {
    embed.contentWindow.print();
  } else {
    // 兼容旧版本浏览器，降级为新窗口打印
    const pdfWindow = window.open('myfile.pdf');
    pdfWindow.onload = () => pdfWindow.print();
  }
}
</script>

这个方法在Firefox里通常能绕过SecurityError，因为embed的contentWindow访问限制比iframe松一些，同时保留了页面内预览的效果。

方案3：使用PDF.js渲染PDF（复杂场景推荐） #

如果需要在页面内预览并打印、不能打开新窗口，可以用Mozilla官方的PDF.js库来渲染PDF，完全在当前页面DOM内控制流程，彻底避免跨域问题：

<div id="pdfContainer" style="width: 96%; height:500px; overflow-y:auto;"></div>
<button type="button" class="btn btn-default" onclick="printPDF()">Print</button>
<!-- 建议本地部署这两个脚本，避免CDN跨域问题 -->
<script src="pdf.js"></script>
<script src="pdf.worker.js"></script>
<script>
let pdfDoc = null;
const container = document.getElementById('pdfContainer');

// 加载并渲染PDF
pdfjsLib.getDocument('myfile.pdf').promise.then(doc => {
  pdfDoc = doc;
  // 渲染所有页面
  for (let i = 1; i <= doc.numPages; i++) {
    renderPage(i);
  }
});

function renderPage(pageNum) {
  pdfDoc.getPage(pageNum).then(page => {
    const viewport = page.getViewport({scale: 1.2});
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.style.width = '100%';
    canvas.style.marginBottom = '10px';
    canvas.height = viewport.height;
    canvas.width = viewport.width;
    container.appendChild(canvas);
    
    page.render({canvasContext: ctx, viewport: viewport});
  });
}

function printPDF() {
  // 创建打印专用窗口
  const printWindow = window.open('', '_blank');
  printWindow.document.write(`
    <html>
      <head><title>Print PDF</title></head>
      <body style="margin:0;">${container.innerHTML}</body>
    </html>
  `);
  printWindow.document.close();
  printWindow.onload = function() {
    printWindow.print();
    setTimeout(() => printWindow.close(), 1000);
  };
}
</script>

这个方法的优势是完全控制PDF的渲染和打印样式，没有跨域风险，适合需要自定义预览、打印布局的复杂场景，但需要引入额外的库文件。

额外注意事项 #

• 如果你的PDF来自其他域名（跨域），最好让PDF服务器配置CORS响应头，比如添加Access-Control-Allow-Origin: 你的页面域名，从根源上解决跨域限制。
• 确保用户的Firefox没有禁用内置PDF查看器，否则可能需要提示用户启用或使用其他方案。

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