Existe-t-il un moyen d'ajouter un en-tête http personnalisé dans la requête effectuée par un <iframe>
lors de la modification de la source (src) à l'aide de javascript?
Vous pouvez obtenir les résultats d'une requête ajax avec des en-têtes personnalisés comme le contenu d'un iframe comme tel:
$.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)) } });
Ceci suppose que l'iframe pointe sur un domaine de cross-domain. Il est plus simple si tout se trouve sur le même domaine.
Modifier: Peut-être essayer cette variation.
$.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); } });
Le code suivant fonctionne. C'est une modification du code fourni par Matthew Graves , modifié pour utiliser l'attribut srcdoc
pour résoudre le problème des références CSS et JavaScript non srcdoc
. Malheureusement, cela ne fonctionne que sur 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) } });
Edit : Enfin, j'ai résolu le problème des blocs de scripts de cross-browser, en les réattribuant à l'iframe sur document.ready function:
$(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(); }); } });
J'ai fini par aller avec l'approche proposée par les autres réponses ici, qui utilisent ajax pour obtenir la chaîne html, puis définir directement le contenu de l' iFrame
.
Cependant, j'ai utilisé l'approche publiée dans cette réponse pour configurer le contenu de l' iFrame
, car j'ai trouvé que cela fonctionnait bien avec la plate-forme croisée avec presque tous les périphériques que je pouvais creuser.
Testé – réussi:
^ A confirmé que css et js liés dans le contenu sont correctement exécutés (d'autres pas testés)
Testé – échoué:
Donc, les mettre ensemble donne quelque chose comme ça (Note: je n'ai pas vraiment utilisé ce code exact):
$.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(); } });
Voici un exemple de configuration du contenu iFrame
dans ce JS Bin
Modifier: Voici la partie html
<iframe id="myiframe" src="about:blank"></iframe>
Modifier 2:
La solution ci-dessus semble ne plus fonctionner dans Firefox (50.1.0) pour une raison inconnue. En utilisant la solution dans cette réponse, j'ai maintenant changé de code pour l'exemple ci-dessous, qui semble également être plus robuste:
$.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"]'; } });
Plutôt que d'utiliser un URI de données ou de configurer le contenu dans une chaîne, vous pouvez utiliser URL.createObjectURL()
et le définir comme src
de l'iframe.
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 :('); } } }
Les URL de l'objet sont assez intéressantes. Ils sont de la forme blob:https://your.domain/1e8def13-3817-4eab-ad8a-160923995170
. Vous pouvez les ouvrir dans un nouvel onglet et voir la réponse, et ils sont ignorés lorsque le contexte qui les a créés est fermé.
Voici un exemple complet: https://github.com/courajs/pdf-poc