web-dev-qa-db-ja.com

iframe srcリクエストにリクエストヘッダーを追加することはできますか？

JavaScriptでAJAXを呼び出すときに、HTTP要求ヘッダーを非常に簡単に設定できることを理解しています。

ただし、スクリプトを使用してiframeをページに挿入するときに、カスタムHTTP要求ヘッダーを設定することもできますか？

<iframe src="someURL"> <!-- is there any place to set headers in this? -->
javascriptiframehttprequest
54
onlywei

いいえ、できません。ただし、iframeソースを何らかの種類のプリロードスクリプトに設定できます。このスクリプトでは、AJAX=を使用して、必要なすべてのヘッダーを含む実際のページを取得します。

22
Niet the Dark Absol

希望するヘッダーを設定して、javascriptでリクエストを行うことができます。次に、 URL.createObjectURL() を使用して、iframeのsrcに適したものを取得できます。

_var xhr = new XMLHttpRequest();

xhr.open('GET', 'page.html');
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 :(');
    }
  }
}
_

応答のMIMEタイプは保持されます。したがって、html応答を受け取った場合、htmlはiframeに表示されます。 PDFをリクエストした場合、ブラウザのPDFビューアがiframeに対応します。

これが長寿命のクライアント側アプリの一部である場合、 URL.revokeObjectURL() を使用してメモリリークを回避できます。

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

完全な例： https://github.com/courajs/pdf-poc

50
FellowMD