web-dev-qa-db-ja.com

iframe srcが大きなbase64データを設定

PDFプレビューと大量のbase64データ（10mb以上）のiframeを持っています。）.

<iframe src="" type="application/pdf"></iframe>'

このデータはどのように使用できますか？データを設定しようとすると：

$("iframe").attr("src", data);

一部のブラウザがクラッシュしています。

Srcリンクがありません。このデータはajaxによって受信されました。助言がありますか？

javascriptiframebase64src
7
rozochkin

これを試してください：多分手遅れです：

<iframe src="data:application/pdf;base64,YOUR_BINARY_DATA" height="100%" width="100%"></iframe>
19
Oliv

AJAX経由でフェッチする必要がある場合、ヘッダーなどを設定するには、 URL.createObjectURL() を確認してください。バイトのチャンクが与えられると、iframeのsrcに適したものが得られます。

var xhr = new XMLHttpRequest();

xhr.open('GET', 'some.pdf');
xhr.onreadystatechange = handler;
xhr.responseType = 'blob';
xhr.setRequestHeader('Authorization', 'Bearer ' + token);
xhr.send();

function handler() {
  if (this.readyState === this.DONE) {
    if (this.status === 200) {
      // this.response is a Blob, because we set responseType above
      var data_url = URL.createObjectURL(this.response);
      document.querySelector('#output-frame-id').src = data_url;
    } else {
      console.error('no pdf :(');
    }
  }
}

オブジェクトのURLはかなり興味深いものです。形式はblob:https://your.domain/1e8def13-3817-4eab-ad8a-160923995170です。それらを新しいタブで実際に開いて応答を確認することができ、それらを作成したコンテキストが閉じられると破棄されます。

ここに完全な例があります： https://github.com/courajs/pdf-poc

1
FellowMD

Srcリンクがありません。このデータはajaxによって受信されました。

AJAXでデータをロードする場合、AJAXデータのロードと$("iframe).attr("src", data)フェーズをバイパスして、同じ URLをiframeに直接フィードできるはずです。 。このAJAXリクエストがbase64データのみを返す場合、リクエストを行う必要はありません。 set iframeのsrcをthisurlに直接設定するだけで動作します。

0
dfsq

特に何が問題なのかはわかりませんが、jQueryを使用してiframe + srcを設定する方法の例であるjsFiddleを次に示します。

Iframeでのsrcの設定とは関係のない、ブラウザのクラッシュを引き起こすその他の問題がある可能性があります。

0
steady rain