阻止了来源为 "http://localhost:8084" 的框架访问跨域框架

Question

我正在尝试打印由 jspdf 生成并加载到 iframe 上的 pdf，但我收到了错误消息：

"DOMException: Blocked a frame with origin "http://localhost:8084" 从访问跨域框架。"

这是我的代码：

  <iframe id="pdf-prueba" name="pdf-box"></iframe>


function open(){
    var pdf = new jsPDF('p', 'mm', [55, 5]);
    var data = pdf.output('datauristring');
    $('#pdf-box').attr("src", data).load(function(){
        document.getElementById('pdf-box').contentWindow.print();
    });
}

Answer 1

DOMException: Blocked a frame with origin "http://localhost:8084" from accessing a cross-origin frame."

此消息有效，因为当您使用 pdf 加载 iframe 时，您使用 datauristring 而不是 blob 设置了 src 属性。

一个简单的解决方案基于：

从 pdf 创建 blob（即：pdf.output('blob')..）
将 blob 转换为 URL（即：URL.createObjectURL(blobPDF)）

使用您的方法违反了政策，因为协议 (http/data) 不同：

一个是http://localhost:8084
iframe 是：数据：application/pdf

另一个错误是：

document.getElementById('pdf-box')

您必须使用 id 而不是名称，因此将其更改为：

document.getElementById('pdf-prueba')

以下更改后的代码适用于 Chrome：

function open(){
  var pdf = new jsPDF('p', 'mm', [55, 5]);

  var blobPDF = pdf.output('blob');

  var blobUrl = URL.createObjectURL(blobPDF);

  $('#pdf-prueba').attr("src", blobUrl).load(function(e){
    document.getElementById('pdf-prueba').contentWindow.print();
  });
}

<iframe id="pdf-prueba" name="pdf-box"></iframe>

阻止了来源为 "http://localhost:8084" 的框架访问跨域框架

Blocked a frame with origin "http://localhost:8084" from accessing a cross-origin frame

html

javascript

jquery

jspdf