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

Question

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

“DOMException:阻止了具有来源的框架” 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))

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

• 一个是http://localhost:8084
• iframe 是:data: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>