क्या iframe src अनुरोध में अनुरोध हेडर जोड़ना संभव है?

Question 1

मैं समझता हूं कि आप जावास्क्रिप्ट में AJAX कॉल करते समय HTTP अनुरोध हेडर बहुत आसानी से सेट कर सकते हैं।

हालांकि स्क्रिप्ट के माध्यम से एक पेज में एक iframe डालने पर कस्टम HTTP अनुरोध हेडर सेट करना संभव है?

<iframe src="someURL"> <!-- is there any place to set headers in this? -->

Question 2

नहीं, आप नहीं कर सकते। हालाँकि आप iframeस्रोत को किसी प्रकार की प्रीलोड स्क्रिप्ट में सेट कर सकते हैं , जो AJAX का उपयोग वास्तविक पेज को उन सभी शीर्षकों के साथ लाने के लिए करता है जिन्हें आप चाहते हैं।

Question 3

आप जावास्क्रिप्ट में अनुरोध कर सकते हैं, किसी भी हेडर को सेट करना चाहते हैं। तो आप कर सकते हैं URL.createObjectURL(), srciframe के लिए कुछ उपयुक्त पाने के लिए ।

var xhr = new XMLHttpRequest();

xhr.open('GET', 'page.html');
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 :(');
    }
  }
}

प्रतिक्रिया का MIME प्रकार संरक्षित है। इसलिए यदि आपको HTML प्रतिक्रिया मिलती है, तो html iframe में दिखाई देगा। यदि आपने एक पीडीएफ का अनुरोध किया है, तो ब्राउज़र पीडीएफ दर्शक iframe के लिए किक करेगा।

यदि यह लंबे समय तक रहने वाले क्लाइंट-साइड ऐप का हिस्सा है, तो आप URL.revokeObjectURL()मेमोरी लीक से बचने के लिए उपयोग करना चाह सकते हैं ।

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

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

Question 4

यह पता चला है कि Chrome 71 में URL.createObjectURL () को घटाया गया है
(देखें https://developers.google.com/web/updates/2018/10/chrome-71-deps-rems )
@ बिल्डिंग पर डार्क डार्क और @ FellowMD के शानदार जवाब, यहां एक फ़ाइल को iframe में लोड करने का तरीका बताया गया है, अगर आपको प्रमाणीकरण हेडर में पास करने की आवश्यकता है। (आप URL पर src विशेषता सेट नहीं कर सकते हैं):

$scope.load() {
    var iframe = #angular.element("#reportViewer");
    var url = "http://your.url.com/path/etc";
    var token = "your-long-auth-token";
    var headers = [['Authorization', 'Bearer ' + token]];
    $scope.populateIframe(iframe, url, headers);
}

$scope.populateIframe = function (iframe, url, headers) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.onreadystatechange = handler;
    xhr.responseType = 'document';
    headers.forEach(function (header) {
        xhr.setRequestHeader(header[0], header[1]);
    });
    xhr.send();

    function handler() {
        if (this.readyState === this.DONE) {
            if (this.status === 200) {
                var content = iframe[0].contentWindow ||
                    iframe[0].contentDocument.document || 
                    iframe[0].contentDocument;
                content.document.open();
                content.document.write(this.response.documentElement.innerHTML);
                content.document.close();
            } else {
                iframe.attr('srcdoc', '<html><head></head><body>Error loading page.</body></html>');
            }
        }
    }
}

और कौराज के लिए चिल्लाओ: https://github.com/courajs/pdf-poc/blob/master/script.js

Question 5

जैसा कि @FellowMD उत्तर createObjectURL के मूल्यह्रास के कारण आधुनिक ब्राउज़रों पर काम नहीं कर रहा है, मैंने उसी दृष्टिकोण का उपयोग किया लेकिन iframe srcDoc विशेषता का उपयोग कर रहा है।

XMLHttpRequest या किसी अन्य विधि का उपयोग करके iframe में प्रदर्शित होने वाली सामग्री को पुनः प्राप्त करें
Iframe का srcdoc पैरामीटर सेट करें

कृपया एक प्रतिक्रिया उदाहरण के नीचे पाएं (मुझे पता है कि यह ओवरकिल है):

import React, {useEffect, useState} from 'react';

function App() {
  const [content, setContent] = useState('');


  useEffect(() => {
    // Fetch the content using the method of your choice
    const fetchedContent = '<h1>Some HTML</h1>';
    setContent(fetchedContent);
  }, []);


  return (
    <div className="App">
      <iframe sandbox id="inlineFrameExample"
              title="Inline Frame Example"
              width="300"
              height="200"
              srcDoc={content}>
      </iframe>


    </div>
  );
}

export default App;

Srcdoc अब अधिकांश ब्राउज़रों पर समर्थित है। ऐसा लगता है कि इसे लागू करने में एज को थोड़ी देर हो गई: https://caniuse.com/#feat=iframe-srcdoc