Wie setze ich benutzerdefinierte HTTP-Header beim Ändern von iframe src?

Question

Gibt es eine Möglichkeit, einen benutzerdefinierten http-Header in die Anfrage von einem bei der Änderung der Quelle (src) mit Javascript?

Answer 1

Sie können die Ergebnisse einer Ajax-Anforderung, das wie, um den Inhalt eines iframe eingestellt werden benutzerdefinierte Header hat:

$.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)) 
    } 
}); 

Das die iframe wird unter der Annahme, bei einem Cross-Domain-src zeigt. Es ist einfacher, wenn alles auf der gleichen Domain ist.

Edit: Vielleicht versuchen Sie diese Variante.

$.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); 
    } 
}); 

Answer 2

Der folgende Code funktioniert. Es ist eine Modifikation der code provided by Matthew Graves, modifiziert, um das srcdoc Attribut zu verwenden, um das Problem von CSS- und JavaScript-Referenzen zu lösen, die nicht ausgeführt wurden. Leider funktioniert es nur in 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) 
     } 
    }); 

bearbeiten: Schließlich habe ich die Frage der Skripte blockiert Cross-Browser behoben haben, indem sie auf die iframe auf document.ready Funktion Neuzuweisung:

$(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(); 
     }); 
    } 
}); 

Answer 3

landete ich werde mit der von den anderen Antworten hier vorgeschlagene Ansatz, der Ajax verwendet, um den HTML-String zu erhalten und dann den Inhalt des iFrame direkt zu setzen.

Allerdings habe ich den Ansatz in diesem answer verwendet, um den Inhalt der iFrame tatsächlich zu setzen, da ich fand, dass es plattformübergreifend mit fast allen Geräten arbeitete, die ich ausgraben konnte.

Getestete - erfolgreich:

• Chrome 54 (Desktop)^
• Firefox 49 (Desktop)^
• IE 11 (Desktop)^
• IE 10 (Desktop) im Emulationsmodus^
• Safari/Chrome auf iOS 8 (ipad)
• Chrome auf Android 6 (Nexus-Telefon)
• Edg e auf Lumia 950 (Win 10 Telefon)

^bestätigt, dass verknüpfte CSS und JS in den Inhalt

Geprüft korrekt (andere nicht getestet) laufen - erfolglos:

• IE 9 (Desktop in Emulation) Modus
• Safari/Chrome auf iOS 7 (iPhone)

So setzen gibt sie zusammen etwas wie folgt (Hinweis: Ich havn't tatsächlich genau dieses Code ausführen):

$.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(); 
    } 
}); 

Hier ist ein Beispiel für den Aufbau der iFrame Inhalte in this JS Bin

Edit: Hier ist der HTML-Teil

<iframe id="myiframe" src="about:blank"></iframe> 

Edit 2:

Die obige Lösung ap Birnen funktionieren in Firefox (50.1.0) aus unbekannten Gründen nicht mehr. Unter Verwendung der Lösung in diesem answer ich jetzt Code auf das Beispiel unten geändert haben, die auch robuster zu sein scheint:

$.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"]'; 
    } 
}); 

Answer 4

vielmehr eine Daten URI oder Einstellen der Inhalte in einen String, als verwenden, können Sie Verwenden Sie URL.createObjectURL(), und legen Sie es als src des Iframe fest.

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 :('); 
    } 
    } 
} 

Die Objekt-URLs sind ziemlich interessant. Sie haben die Form blob:https://your.domain/1e8def13-3817-4eab-ad8a-160923995170. Sie können sie in einem neuen Tab öffnen und die Antwort sehen, und sie werden verworfen, wenn der Kontext, der sie erstellt hat, geschlossen ist.

Hier ist ein vollständiges Beispiel: https://github.com/courajs/pdf-poc