iframe src बदलते समय कस्टम http शीर्षलेख कैसे सेट करें?

Question

क्या जावास्क्रिप्ट का उपयोग कर स्रोत (src) को बदलते समय द्वारा किए गए अनुरोध में एक कस्टम http शीर्षलेख जोड़ने का कोई तरीका है?

Answer 1

आप है कि कस्टम हेडर तो जैसे एक iframe की सामग्री के रूप में सेट किया एक ajax अनुरोध का परिणाम हो सकता है:

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

यह आइफ्रेम संभालने है एक क्रॉस डोमेन src पर इशारा करते हुए है। यह सब आसान है अगर सब कुछ एक ही डोमेन पर है।

संपादित करें: शायद इस बदलाव को आजमाएं।

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

निम्नलिखित कोड काम करता है। यह code provided by Matthew Graves का एक संशोधन है, सीएसएस की समस्या को हल करने के लिए srcdoc विशेषता का उपयोग करने के लिए संशोधित किया गया है और जावास्क्रिप्ट संदर्भों को नहीं चलाया गया है। दुर्भाग्य से, यह केवल क्रोम में काम कर रहा है।

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

संपादित: अंत में, मैं स्क्रिप्ट ब्लॉक क्रॉस-ब्राउज़र का मुद्दा, उन्हें document.ready समारोह पर आइफ्रेम तक फिर नियत से समाधान किया:

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

मैं के साथ जा रहा समाप्त हो गया यहां अन्य उत्तरों द्वारा प्रस्तावित दृष्टिकोण, जो HTML स्ट्रिंग प्राप्त करने के लिए AJAX का उपयोग करते हैं और फिर सीधे iFrame की सामग्री सेट करते हैं।

हालांकि, मैंने में वास्तव में iFrame की सामग्री सेट करने के लिए पोस्ट किए गए दृष्टिकोण का उपयोग किया, क्योंकि मैंने पाया कि यह लगभग सभी उपकरणों के साथ अच्छी तरह से क्रॉस प्लेटफ़ॉर्म काम करता है जो मैं खोद सकता हूं।

परीक्षण किया - सफल:

• क्रोम 54 (डेस्कटॉप)^
• फ़ायरफ़ॉक्स 49 (डेस्कटॉप)^
• IE 11 (डेस्कटॉप)^अनुकरण मोड में
• आईई 10 (डेस्कटॉप)^
• सफारी/क्रोम iOS 8 पर (iPad)
• क्रोम एंड्रॉयड 6 (गठजोड़ फोन)
• Edg पर लूमिया 950 (विन 10 फोन) पर ई

^जुड़ा हुआ सीएसएस और सामग्री में js सही ढंग से चलने वाले इस बात की पुष्टि (दूसरों का परीक्षण नहीं)

परीक्षण किया - असफल:

• आईई 9 (डेस्कटॉप) अनुकरण मोड
• सफारी/क्रोम, iOS 7 पर (iPhone)

तो उन्हें एक साथ डाल में कुछ इस तरह (नोट देता है: मैं havn't वास्तव में इस सटीक कोड) चलाएँ:

$.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 सामग्री in this JS Bin

संपादित स्थापित करने का एक उदाहरण है: यहाँ एचटीएमएल हिस्सा

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

संपादित 2 है:

एपी के ऊपर समाधान किसी अज्ञात कारण के लिए अब नाशपाती फ़ायरफ़ॉक्स (50.1.0) में काम नहीं कर रहे हैं। यह भी लगता है जो समाधान इस answer में मैं अब नीचे दिए गए उदाहरण के लिए कोड को बदल दिया है, का उपयोग करते हुए और अधिक मजबूत होने के लिए:

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

बल्कि एक डेटा यूआरआई का उपयोग कर, या एक स्ट्रिंग के लिए सामग्री की स्थापना की तुलना में, आप कर सकते हैं URL.createObjectURL() का उपयोग करें, और इसे iframe के 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 :('); 
    } 
    } 
} 

ऑब्जेक्ट यूआरएल बहुत दिलचस्प हैं। वे blob:https://your.domain/1e8def13-3817-4eab-ad8a-160923995170 के रूप में हैं। आप वास्तव में उन्हें एक नए टैब में खोल सकते हैं और प्रतिक्रिया देख सकते हैं, और जब उन्हें बनाया गया संदर्भ बंद हो जाता है तो उन्हें त्याग दिया जाता है।

यहां एक पूर्ण उदाहरण है: https://github.com/courajs/pdf-poc