iframe src değiştirilirken özel http üstbilgileri nasıl ayarlanır?

Question

javascript kullanarak kaynağı (src) değiştirirken, tarafından yapılan istek üzerine özel bir http başlığı eklemek için bir yol var mı?

Answer 1

Sen özel başlıklar şöyle bir iframe içeriği olarak ayarlanmalıdır olan bir ajax isteği sonuçları olabilir: Bu iframe üstleniyor

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

çapraz etki src işaret olduğunu. Her şeyin aynı alanda olması daha basittir.

Düzenleme: Belki bu varyasyonu deneyin.

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

Aşağıdaki kod çalışır. Bu, CSS ve JavaScript referanslarının sorununu çözmek için srcdoc özniteliğini kullanmak üzere değiştirilen code provided by Matthew Graves'un bir değişikliğidir. Maalesef, yalnızca Chrome'da çalışıyor.

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

Düzenleme: Son olarak, document.ready fonksiyonu üzerine iframe onları yeniden atayarak, komut blokları çapraz tarayıcı sorunu çözdüm:

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

Birlikte gidiş sona erdi Burada html dizesini almak için ajax kullanan ve daha sonra iFrame'un içeriğini doğrudan belirleyen diğer yanıtlar tarafından önerilen yaklaşım.

Ancak, ben ben kazıp hemen hepsinin cihazlarla iyi çapraz platform çalıştı bulduğumuz gibi aslında iFrame içeriğini ayarlamak için bu answer gönderilmiş yaklaşımını kullanmıştır.

Test - Başarılı:

• Krom 54 (masaüstü)^
• Firefox 49 (masaüstü)^
• IE 11 (masaüstü)^öykünme modunda
• IE 10 (masaüstü)^
• iOS 8 Safari/Chrome (ipad)
• Krom Android 6 (nexus telefon)
• EDG üzerinde
  • IE 9 (masaüstü: başarısız - Lumia 950 (Win 10 Phone) e

  (diğerleri test edilmedi)

  Test içerikte bağlantılı css ve js düzgün çalışması doğruladı ^) öykünme modunda

• iOS 7 Safari/Krom (iPhone)

Yani araya koyarak böyle bir şey (Not verir: Aslında) tam olarak bu kod çalıştırmasına havn't: Burada

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

iFrame içeriğini

Düzenleme in this JS Bin ayarlamaya ilişkin bir örnek: Burada html parçası

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

Düzenleme 2 açıklanmıştır:

Yukarıdaki ap Artık bilinmeyen bir nedenle Firefox’ta (50.1.0) çalışan armutlar. Ayrıca görünüyor şimdi aşağıdaki örnekle koduna değiştirdik bu answer çözümü kullanarak daha sağlam olması için:

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

Aksine URI verileri kullanarak veya bir dizeye içeriğini ayarlamak yerine can URL.createObjectURL() kullanın ve iframe'in src'u olarak ayarlayın.

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

Nesne URL'leri oldukça ilgi çekicidir. blob:https://your.domain/1e8def13-3817-4eab-ad8a-160923995170 formundalar. Bunları yeni bir sekmede açabilir ve yanıtı görebilir ve bunları oluşturan içerik kapatıldığında atılırlar.

İşte tam bir örnek: https://github.com/courajs/pdf-poc