如何在更改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