javascript - Blocked a frame with origin "http:localhost:8084" from accessing a cross-origin frame - Stack Ove

admin管理员组

文章数量:1340295

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

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

• javascript
• jquery
• html
• jspdf

Share Improve this question Follow asked Feb 7, 2017 at 21:19 Malarkey86Malarkey86 10711 gold badge11 silver badge77 bronze badges 3

• Possible duplicate of SecurityError: Blocked a frame with origin from accessing a cross-origin frame – empiric Commented Feb 7, 2017 at 21:30
• @empiric it's not duplicate, i have the same Protocol, hostname and port that my domain – Malarkey86 Commented Feb 7, 2017 at 21:33
• Then you should include more information about your environment instead of letting us guess what's happening – empiric Commented Feb 7, 2017 at 21:35

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

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>

本文标签：