Jak ustawić niestandardowe nagłówki http podczas zmiany elementu iframe src?

Question

Czy istnieje sposób dodania niestandardowego nagłówka http do żądania wykonanego przez podczas zmiany źródła (src) przy użyciu javascript?

Answer 1

Można mieć wyniki żądania AJAX, który ma być ustawiony niestandardowych nagłówków jako zawartość iframe tak:

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

to zakładając iframe jest wskazując na pole karne src domeny. Łatwiej jest, jeśli wszystko jest w tej samej domenie.

Edytuj: Może spróbuj tej odmiany.

$.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

Poniższy kod działa. Jest to modyfikacja code provided by Matthew Graves, zmodyfikowana w celu użycia atrybutu srcdoc w celu rozwiązania problemu, który nie został uruchomiony z odwołaniami do skryptów CSS i JavaScript. Niestety działa tylko w 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: Wreszcie mam rozwiązany skryptów blokuje krzyżowego przeglądarki, zmieniając je w iframe na document.ready funkcję:

$(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

skończyło się dzieje z podejście zaproponowane przez inne odpowiedzi tutaj, które używają ajax, aby uzyskać ciąg html, a następnie bezpośrednio ustawić zawartość iFrame.

Jednak użyłem podejścia przedstawionego w tym answer, aby faktycznie ustawić zawartość iFrame, ponieważ okazało się, że działa dobrze na platformie z prawie wszystkimi urządzeniami, które mogłem wykopać.

Testowane - skuteczny:

• Chrom 54 (komputer)^
• Firefox 49 (komputer)^
• IE 11 (komputer)^
• IE 10 (komputer), w trybie emulacji^
• Safari/Chrome na iOS 8 (ipad)
• Chrome na Androida 6 (telefon Nexus)
• Edg e na Lumia 950 (Win 10 kodów)

^potwierdzono, że połączone CSS JS zawartości móc (innych nie badano)

Testowane - nieskuteczne:

• IE 9 (pulpit) w trybie emulacji
• Safari/Chrome na iOS 7 (iPhone)

więc wprowadzenie ich razem daje coś takiego (uwaga: Havn't faktycznie uruchomić dokładnie ten kod):

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

Oto przykład ustawiania iFrame zawartość in this JS Bin

Edit: Oto część html

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

Edit 2:

Rozwiązanie powyżej gruszki nie działają już w Firefox (50.1.0) z jakiegoś nieznanego powodu. Stosując rozwiązanie w tej answer Mam teraz zmieniony na kod na poniższym przykładzie, który również wydaje się być bardziej wytrzymałe:

$.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

Zamiast przy użyciu danych URI, lub ustawienie zawartości do łańcucha, można użyj URL.createObjectURL() i ustaw jako element iframe jako src.

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

Adresy URL obiektów są całkiem interesujące. Są w formie blob:https://your.domain/1e8def13-3817-4eab-ad8a-160923995170. Możesz je otworzyć w nowej karcie i zobaczyć odpowiedź, a zostaną one odrzucone, gdy kontekst, który je utworzył, zostanie zamknięty.

Oto pełny przykład: https://github.com/courajs/pdf-poc