阻止了源自“http://localhost:8084”的框架访问跨源框架。

Question

我正在尝试打印由jspdf生成并加载到iframe中的pdf文件，但是我收到了以下错误信息：

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

这是我的代码：

  <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();
    });
}

- Malarkey86

---

可能是重复的问题：SecurityError: Blocked a frame with origin from accessing a cross-origin frame。 - empiric

@empiric 这不是重复的，我有相同的协议、主机名和端口，与我的域名相同。 - Malarkey86

那么，你应该包含更多关于你的环境的信息，而不是让我们猜测发生了什么。 - empiric

Answer 1

DOMException: 阻止了源为“http://localhost:8084”的框架访问跨源框架。

这个消息是有效的，因为当您加载包含PDF的iframe时，您使用的是datauristring而不是blob。

一个简单的解决方案基于以下步骤：

- 从pdf创建一个blob（例如：pdf.output('blob')..） - 将blob转换为URL（例如：URL.createObjectURL(blobPDF)）

使用您的方法违反了策略，因为协议（http/data）不同：

- 其中一个是http://localhost:8084 - iframe是：data:application/pdf

另一个错误是：

document.getElementById('pdf-box')

您必须使用id而不是name，因此将其更改为:

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>

- gaetanoM

---

哦！非常感谢！我一直在尝试使用Ajax并从服务器下载。 - Malarkey86

欢迎您。很高兴能分享。 - gaetanoM