47

<iframe>javascript を使用してソース (src) を変更するときに、カスタム http ヘッダーをリクエストに追加する方法はありますか?

4

4 に答える 4

34

次のように、カスタム ヘッダーを含む ajax リクエストの結果を iframe のコンテンツとして設定できます。

$.ajax({
    type: "GET", 
    url: "https://app.icontact.com/icp/a/",
    contentType: "application/json",
    beforeSend: function(xhr, settings){
            xhr.setRequestHeader("some_custom_header", "foo");},
    success: function(data){
        $("#output_iframe_id").attr('src',"data:text/html;charset=utf-8," + escape(data))
    }
});

これは、iframe がクロス ドメイン src を指していると想定しています。すべてが同じドメインにある場合は簡単です。

編集：このバリエーションを試してみてください。

$.ajax({
    type: "GET", 
    url: "https://app.icontact.com/icp/a/",
    contentType: "application/json",
    beforeSend: function(xhr, settings){
            xhr.setRequestHeader("some_custom_header", "foo");},
    success: function(data){
        $("#output_iframe_id").attr('src',"/")
        $("#output_iframe_id").contents().find('html').html(data); 
    }
});
于 2013-07-17T08:39:37.333 に答える
7

ここで他の回答で提案されたアプローチに行き着きました.ajaxを使用してhtml文字列を取得し、の内容を直接設定しiFrameます.

ただし、この回答に投稿されたアプローチを使用して実際にのコンテンツを設定しiFrameました。これは、掘り下げることができるほとんどすべてのデバイスでクロスプラットフォームでうまく機能することがわかったからです。

テスト済み - 成功:

  • Chrome 54 (デスクトップ) ^
  • Firefox 49 (デスクトップ) ^
  • IE 11 (デスクトップ) ^
  • エミュレーション モードの IE 10 (デスクトップ) ^
  • iOS 8 (iPad) の Safari/Chrome
  • Android 6 の Chrome（ネクサス フォン）
  • Lumia 950 の Edge (Win 10 Phone)

^ コンテンツ内のリンクされた css と js が正しく動作することを確認しました (その他は未テスト)

テスト済み - 不合格:

  • エミュレーション モードの IE 9 (デスクトップ)
  • iOS 7 (iPhone) の Safari/Chrome

したがって、それらをまとめると、次のようになります（注：この正確なコードを実際に実行したことはありません）：

$.ajax({
    type: "GET", 
    url: "https://yourdomain.com/gethtml",
    beforeSend: function(xhr) {
        xhr.setRequestHeader("yourheader", "value");
    },
    success: function(data) {
        var iframeDoc = document.querySelector('#myiframe').contentWindow.document;
        iframeDoc.open('text/html', 'replace');
        iframeDoc.write(data);
        iframeDoc.close();
    }
});

この JS BiniFrameにコンテンツを設定する例を次に示します。

編集：これがhtml部分です

<iframe id="myiframe" src="about:blank"></iframe>

編集2：

上記の解決策は、何らかの理由で Firefox (50.1.0) では機能しないようです。この回答のソリューションを使用して、以下の例のコードに変更しました。これもより堅牢なようです。

$.ajax({
    type: "GET", 
    url: "https://yourdomain.com/gethtml",
    beforeSend: function(xhr) {
        xhr.setRequestHeader("yourheader", "value");
    },
    success: function(data) {
        var iframe = document.getElementById('myiframe');
        iframe.contentWindow.contents = data;
        iframe.src = 'javascript:window["contents"]';
    }
});
于 2016-11-16T03:13:44.330 に答える
5

次のコードは機能します。これはMatthew Graves によって提供されたコードsrcdocの修正であり、CSS および JavaScript 参照が実行されていない問題を解決するために属性を使用するように修正されています。残念ながら、それは Chrome でのみ動作します。

 $.ajax({
        type: "GET", 
        url: "https://app.icontact.com/icp/a/",
        contentType: "application/json",
        beforeSend: function(xhr, settings){
                xhr.setRequestHeader("some_custom_header", "foo");},
        success: function(data){
            $("#output_iframe_id").attr('srcdoc',data)
        }
    });

編集: 最後に、スクリプト ブロックのクロス ブラウザーの問題を解決しました。それらを document.ready 関数の iframe に再割り当てします。

$(document).ready(function () {
    var doc = $(document);
    if (frames.length > 0) {
        doc = frames[0].document;
        $(doc).find('script').each(function () {
            var script = document.createElement("script");
            if ($(this).attr("type") != null) script.type = $(this).attr("type");
            if ($(this).attr("src") != null) script.src = $(this).attr("src");
            script.text = $(this).html();
            $(doc).find('head')[0].appendChild(script);
            $(this).remove();
        });
    }
});
于 2013-07-19T12:22:36.443 に答える