Ich verstehe, dass Sie HTTP-Anforderungsheader sehr einfach festlegen können, wenn Sie AJAX-Aufrufe in JavaScript ausführen.
Ist es jedoch auch möglich, benutzerdefinierte HTTP-Anforderungsheader festzulegen, wenn ein Iframe per Skript in eine Seite eingefügt wird?
<iframe src="someURL"> <!-- is there any place to set headers in this? -->
Antworten:
Nein, das kannst du nicht. Sie können die iframeQuelle jedoch auf eine Art Preload-Skript einstellen , das AJAX verwendet, um die eigentliche Seite mit allen gewünschten Headern abzurufen.
Sie können die Anfrage in Javascript stellen und beliebige Header festlegen. Dann können Sie URL.createObjectURL()etwas Passendes für srcden Iframe bekommen.
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 :(');
}
}
}
Der MIME-Typ der Antwort bleibt erhalten. Wenn Sie also eine HTML-Antwort erhalten, wird das HTML im Iframe angezeigt. Wenn Sie ein PDF angefordert haben, wird der PDF-Viewer des Browsers für den Iframe aktiviert.
Wenn dies Teil einer langlebigen clientseitigen App ist, möchten Sie diese möglicherweise verwenden URL.revokeObjectURL() Speicherlecks vermeiden.
Die Objekt-URLs sind auch ziemlich interessant. Sie sind von der Form blob:https://your.domain/1e8def13-3817-4eab-ad8a-160923995170. Sie können sie tatsächlich in einem neuen Tab öffnen und die Antwort anzeigen. Sie werden verworfen, wenn der Kontext, in dem sie erstellt wurden, geschlossen wird.
Hier ist ein vollständiges Beispiel: https://github.com/courajs/pdf-poc
Es stellt sich heraus , dass URL.createObjectURL () in Chrome ist veraltet 71
(siehe https://developers.google.com/web/updates/2018/10/chrome-71-deps-rems )
Aufbauend auf @Niet die dunkle Absol und In den hervorragenden Antworten von @ FellowMD erfahren Sie, wie Sie eine Datei in einen Iframe laden, wenn Sie Authentifizierungsheader übergeben müssen. (Sie können das src-Attribut nicht einfach auf die URL setzen):
$scope.load() {
var iframe = #angular.element("#reportViewer");
var url = "http://your.url.com/path/etc";
var token = "your-long-auth-token";
var headers = [['Authorization', 'Bearer ' + token]];
$scope.populateIframe(iframe, url, headers);
}
$scope.populateIframe = function (iframe, url, headers) {
var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.onreadystatechange = handler;
xhr.responseType = 'document';
headers.forEach(function (header) {
xhr.setRequestHeader(header[0], header[1]);
});
xhr.send();
function handler() {
if (this.readyState === this.DONE) {
if (this.status === 200) {
var content = iframe[0].contentWindow ||
iframe[0].contentDocument.document ||
iframe[0].contentDocument;
content.document.open();
content.document.write(this.response.documentElement.innerHTML);
content.document.close();
} else {
iframe.attr('srcdoc', '<html><head></head><body>Error loading page.</body></html>');
}
}
}
}
und rufen Sie Courajs an: https://github.com/courajs/pdf-poc/blob/master/script.js
URL.createObjectURL(new Blob([this.response.documentElement.innerHTML]))
createObjectURLwird nur für MediaStream-Argumente veraltet. Das Übergeben eines Blobs ist nicht veraltet und wird in der Tat ziemlich häufig und zunehmend genutzt . Ich schätze die Mühe, die Dinge auf dem neuesten Stand zu halten :)
Da die @ FellMD-Antwort in modernen Browsern aufgrund der Abwertung von createObjectURL nicht funktioniert, habe ich denselben Ansatz verwendet, jedoch das Attribut iframe srcDoc verwendet.
Nachfolgend finden Sie ein Reaktionsbeispiel (ich weiß, dass es übertrieben ist):
import React, {useEffect, useState} from 'react';
function App() {
const [content, setContent] = useState('');
useEffect(() => {
// Fetch the content using the method of your choice
const fetchedContent = '<h1>Some HTML</h1>';
setContent(fetchedContent);
}, []);
return (
<div className="App">
<iframe sandbox id="inlineFrameExample"
title="Inline Frame Example"
width="300"
height="200"
srcDoc={content}>
</iframe>
</div>
);
}
export default App;
Srcdoc wird jetzt in den meisten Browsern unterstützt. Es scheint, dass Edge etwas spät dran war, es zu implementieren: https://caniuse.com/#feat=iframe-srcdoc
createObjectURLwird nur für MediaStream-Argumente veraltet. Das Übergeben eines Blobs ist nicht veraltet und wird in der Tat ziemlich häufig und zunehmend genutzt . Ich schätze die Bemühungen, die Dinge auf dem neuesten Stand zu halten :)