阻止来源为“http：// localhost：8084”的框架从访问跨源帧 [英] Blocked a frame with origin "http://localhost:8084" from accessing a cross-origin frame

问题描述

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

DOMException：阻止了一个框架原始地址 http：// localhost：8084 访问一个跨源框架。

$ b $

 < iframe id =pdf-pruebaname = PDF的框>< / iframe中> 
 
 
函数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（）; 
}）; 
} 
  

解决方案

DOMException：阻止源自 http：// localhost：8084 的框架访问跨源框架。

此消息有效，因为当您使用pdf加载iframe时，您使用数据字符串设置src属性，而不是blob。

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

• 从pdf创建一个blob（即：pdf
  
• 将blob转换为URL（即：URL.createObjectURL（blobPDF））
  

这个策略违反了你的方法，因为协议（http / data）是不同的：

• 是 http：// localhost：8084


• iframe是：data：application / pdf

另一个错误是：

  document.getElemen tById（'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）; 
 $ b $（'＃pdf-prueba'）。attr（src，blobUrl）.load（function（e）{
 document.getElementById（'pdf-prueba'）。contentWindow .print（）; 
}）; 
 
  

  < iframe id =pdf-pruebaname =pdf-box>< / iframe> 
  

I'm trying to print a pdf generated by jspdf and loaded on iframe, but I'm getting that error message:

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

this is my code:

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

解决方案

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

This message is valid because when you load iframe with the pdf you set the src attribute with a datauristring, not a blob.

A simple solution is based on:

• create a blob from pdf (i.e.: pdf.output('blob')..)
• convert the blob to URL (i.e.: URL.createObjectURL(blobPDF))

The policy is violated using your approach because the protocols (http/data) are different:

• one is http://localhost:8084
• the iframe is: data:application/pdf

Another mistake is:

document.getElementById('pdf-box')

You must use the id and not the name, so change it to:

document.getElementById('pdf-prueba')

The following changed code works in 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”的框架从访问跨源帧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！