99

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

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

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

4 に答える 4

92

必要なヘッダーを設定して、javascript でリクエストを行うことができます。次に、iframe の にURL.createObjectURL()適したものを取得できます。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

于 2017-02-16T17:22:04.653 に答える
36

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

于 2012-11-17T17:18:55.323 に答える
7

@FellowMD の回答は createObjectURL の減価償却により最新のブラウザーでは機能しないため、同じアプローチを使用しましたが、iframe srcDoc 属性を使用しました。

  1. XMLHttpRequest またはその他のメソッドを使用して、iframe に表示するコンテンツを取得します
  2. iframe の srcdoc パラメータを設定する

以下のReactの例を見つけてください（やり過ぎだと思います）：

import React, {useEffect, useState} from 'react';

function App() {
  const [content, setContent] = useState('');


  useEffect(() => {
    // Fetch the content using the method of your choice
    const fetchedContent = '<h1>Some HTML</h1>';
    setContent(fetchedContent);
  }, []);


  return (
    <div className="App">
      <iframe sandbox id="inlineFrameExample"
              title="Inline Frame Example"
              width="300"
              height="200"
              srcDoc={content}>
      </iframe>


    </div>
  );
}

export default App;

Srcdoc は現在、ほとんどのブラウザーでサポートされています。Edge の実​​装が少し遅れたようです: https://caniuse.com/#feat=iframe-srcdoc

于 2020-07-31T15:23:36.487 に答える