如何在更改iframe src時設置自定義http標題？

Question

當使用javascript更改源（src）時，是否有方法將自定義http標頭添加到完成的請求中？

Answer 1

你可以有一個具有自定義標題設置爲一個iframe的像這樣內容的Ajax請求的結果：

$.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); 
    } 
}); 

Answer 2

以下代碼有效。它是對code provided by 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(); 
     }); 
    } 
}); 

Answer 3

我結束了去這裏的其他答案提出的方法，即使用ajax來獲取html字符串，然後直接設置iFrame的內容。

但是，我使用了answer中發佈的方法來實際設置iFrame的內容，因爲我發現它幾乎可以與所有可以挖掘的設備交叉平臺運行。

測試 - 成功：

• 鉻54（桌面）^
• 火狐49（桌面）^
• IE 11（桌面）^在仿真模式
• IE 10（桌面）^
• Safari /鉻在iOS 8（的ipad）
• 鉻在Android 6（Nexus手機）
• 的Edg E在的Lumia 950（10場電話）

^證實，在內容鏈接的CSS和JS正常運行（其他未測試）

測試 - 不成功：

• IE 9（桌面）在仿真模式
• Safari /鉻在iOS 7（iPhone）

所以，把它們放在一起讓這樣的事情（注：我沒有帶實際運行這個確切的代碼）：

$.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(); 
    } 
}); 

這裏的設置iFrame內容in this JS Bin

編輯的例子：這裏的HTML部分

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

編輯2：

上面的解決方案ap由於某些未知原因，梨不再在Firefox（50.1.0）中工作。利用該解決方案在此answer我現在改爲代碼下面的例子中，這似乎也更穩健：

$.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"]'; 
    } 
}); 

Answer 4

而不是使用數據URI或內容設置爲一個字符串，可以使用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 :('); 
    } 
    } 
} 

對象網址非常有趣。它們的格式爲blob:https://your.domain/1e8def13-3817-4eab-ad8a-160923995170。實際上，您可以在新選項卡中打開它們並查看響應，並在創建它們的上下文關閉時丟棄它們。

下面是一個完整的示例：https://github.com/courajs/pdf-poc