如何在更改iframe-src时设置自定义http头
How to set custom http headers when changing iframe src?
当使用javascript更改源(src)时,是否有方法将自定义http标头添加到<iframe>
完成的请求中?
您可以将具有自定义标头的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);
}
});
您可以使用URL.createObjectURL()
,并将其设置为iframe的src
,而不是使用数据URI或将内容设置为字符串。
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 :(');
}
}
}
对象URL非常有趣。它们的形式为blob:https://your.domain/1e8def13-3817-4eab-ad8a-160923995170
。实际上,您可以在一个新的选项卡中打开它们并查看响应,当创建它们的上下文关闭时,它们就会被丢弃。
以下是一个完整的示例:https://github.com/courajs/pdf-poc
我最终采用了其他答案提出的方法,即使用ajax获取html字符串,然后直接设置iFrame
的内容。
然而,我使用了这个答案中发布的方法来实际设置iFrame
的内容,因为我发现它在几乎所有我能找到的设备上都能很好地跨平台工作。
测试-成功:
- Chrome 54(桌面)^
- Firefox 49(桌面)^
- IE 11(桌面)^
- IE 10(桌面)处于模拟模式^
- iOS 8(ipad)上的Safari/Chrome
- 安卓6上的Chrome(nexus手机)
- Edge on Lumia 950(Win 10手机)
^确认内容中链接的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 Bin 中设置iFrame
内容的示例
编辑:这是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"]';
}
});
以下代码有效。它是对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)
}
});
编辑:最后,我解决了脚本块跨浏览器的问题,将它们重新分配到文档上的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();
});
}
});
- 如何设置自定义垂直滑块Jquery的动画
- 如何在ExtJs4应用程序上为视图、存储和模型设置自定义文件夹名称
- Alfresco JavaScript,当文件上传到网站时,设置自定义类型属性
- 如何使用传单为传单实时插件设置自定义图标
- 正在设置自定义属性名称
- 设置自定义覆盖和多边形的任意z索引顺序
- 在条件中的几个时间行中设置自定义css效果后,从Jquery时间选择器显示时间
- 从ngInit在AngularJS中全局设置自定义HTTP头
- 使用 jQuery 设置自定义属性和值
- 谷歌分析设置自定义维度值
- 如果未选中,则 js 复选框不设置自定义值
- 使用 JavaScript 设置自定义属性
- node_module 设置自定义版本
- 如何在只读输入字段上设置自定义有效性
- JQPLOT 根据标签名称为饼图设置自定义颜色
- 角度设置自定义标头始终包装在访问控制请求标头中
- 在 Ajax 调用中设置自定义内容类型响应标头
- 通用分析中用于设置自定义维度的操作顺序
- 如何设置自定义对象属性以在 Angular 类型提前中进行筛选
- 如何在 php 中设置自定义月份开始日期和结束日期