IFrameのsrcリクエストにリクエストヘッダーを追加する方法

JavaScriptを使用した方法: 以下のコード例は、JavaScriptを使用してIFrameのsrcリクエストにリクエストヘッダーを追加する方法を示しています。

var iframe = document.getElementById('myIframe');
var url = 'https://example.com'; // IFrameのsrc属性に設定するURL
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.setRequestHeader('HeaderName', 'HeaderValue'); // リクエストヘッダーを追加する
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    iframe.src = url; // IFrameのsrcに設定することで外部ページをロードする
  }
};
xhr.send();

上記の例では、XMLHttpRequestオブジェクトを使用してGETリクエストを送信し、リクエストヘッダーを追加しています。IFrameのsrc属性は、レスポンスが成功した場合に設定されます。

fetch APIを使用した方法: fetch APIを使用すると、リクエストヘッダーを追加することができます。以下のコード例は、fetch APIを使用してIFrameのsrcリクエストにリクエストヘッダーを追加する方法を示しています。

var iframe = document.getElementById('myIframe');
var url = 'https://example.com'; // IFrameのsrc属性に設定するURL
fetch(url, {
  headers: {
    'HeaderName': 'HeaderValue' // リクエストヘッダーを追加する
  }
})
.then(function(response) {
  if (response.ok) {
    iframe.src = url; // IFrameのsrcに設定することで外部ページをロードする
  }
});

上記の例では、fetch関数を使用してGETリクエストを送信し、headersオプションを使用してリクエストヘッダーを追加しています。

これらの方法を使用することで、IFrameのsrcリクエストに独自のリクエストヘッダーを追加することができます。必要に応じて、他のリクエストヘッダーを追加することも可能です。