Comment définir des en-têtes HTTP personnalisés lors de la modification de iframe src?

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:

    • Chrome 54 (bureau) ^
    • Firefox 49 (bureau) ^
    • IE 11 (bureau) ^
    • IE 10 (bureau) en mode émulation ^
    • Safari / Chrome sur iOS 8 (ipad)
    • Chrome sur Android 6 (téléphone nexus)
    • Edge sur Lumia 950 (Win 10 Phone)

    ^ A confirmé que css et js liés dans le contenu sont correctement exécutés (d'autres pas testés)

    Testé – échoué:

    • IE 9 (bureau) en mode émulation
    • Safari / Chrome sur iOS 7 (iPhone)

    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