是否可以將請求標頭添加到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請求中？

回答

相關問題