web-dev-qa-db-ja.com

Origin "http：// localhost：8084"のフレームがクロスオリジンフレームにアクセスすることをブロックしました

Jspdfによって生成され、iframeに読み込まれたPDFを印刷しようとしていますが、そのエラーメッセージが表示されます。

「DOMException：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();
    });
}
javascriptjqueryhtmljspdf
6
Malarkey86

DOMException：Origin " http：// localhost：8084 "がクロスオリジンフレームにアクセスできないようにする "でフレームをブロックしました。

このメッセージは、iframeをpdfでロードするときに、src属性にblobではなくdatauristringを設定するため、有効です。

簡単な解決策は以下に基づいています。

  • pDFからBLOBを作成します（つまり、pdf.output（ 'blob'）..）
  • blobをURLに変換します（例：URL.createObjectURL（blobPDF））

プロトコル（http/data）が異なるため、アプローチを使用するとポリシーに違反します。

別の間違いは次のとおりです。

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>
8
gaetanoM