是否可以将请求标头添加到iframe src请求中？

我知道您可以在使用JavaScript进行AJAX调用时非常容易地设置HTTP请求标头。是否可以将请求标头添加到iframe src请求中？

但是，在通过脚本将iframe插入页面时，是否也可以设置自定义HTTP请求标头？

<iframe src="someURL"> <!-- is there any place to set headers in this? -->

来源

2012-11-17 onlywei

不，你不能。但是，您可以将iframe源文件设置为某种预加载脚本，该脚本使用AJAX来提取包含所有标题的实际页面。

来源

2012-11-17 17:18:55

嗨Niet的，能否请您提供的jsfiddle –

执行样本代码，我相信Niet的意思是这样的 http://stackoverflow.com/a/17695034/1524918 –

止跌这种预加载脚本中的请求是否被发送到不同的域，从而违反了同源策略？ – mart1n

你可以在javascript中提出请求，设置你想要的任何头文件。然后你可以URL.createObjectURL()，以获得适合iframe的src的东西。

var xhr = new XMLHttpRequest(); 

xhr.open('GET', 'page.html'); 
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 :('); 
    } 
    } 
}

响应的MIME类型被保留。所以如果你得到一个html响应，html将显示在iframe中。如果您要求PDF，浏览器PDF查看器将会启用iframe。

如果这是长期客户端应用程序的一部分，您可能需要使用URL.revokeObjectURL()以避免内存泄漏。

对象的URL也很有趣。它们的格式为blob:https://your.domain/1e8def13-3817-4eab-ad8a-160923995170。实际上，您可以在新选项卡中打开它们并查看响应，并在创建它们的上下文关闭时丢弃它们。

这里有一个完整的例子：https://github.com/courajs/pdf-poc

来源

2017-02-16 17:22:04 FellowMD

完美。完美无瑕地工作。谢谢。 – mike123

你是男人！我正在研究一个受此代码启发的Angular 5组件，以在Angularjs中显示pdf预览。这对我来说非常有帮助 – FireDragon

@FireDragon很高兴听到它！如果您打开源代码，请将其链接到此处 – FellowMD

是否可以将请求标头添加到iframe src请求中？

回答

相关问题