क्यों iframe मेरी html सामग्री को टेक्स्ट सामग्री के रूप में मान रहा है।

प्रश्न: मैं संपूर्ण HTML को उसके टैग के साथ प्रस्तुत करना चाहता हूं, पाठ के रूप में नहीं।

नीचे दी गई छवि मेरी समस्या दिखाती है:

enter image description here

मेरा कोड:

$('#resultBtn').off('click');
 $('#resultBtn').on('click',function(){
 
 var html = '<p id="pclick">Click me to see Alert</p>'
  var javascript = `document.querySelector('#pclick').on('click',function(){
     alert('clicked me');
 })`;
  var bodyContent = html +`<script>${javascript}<\/script>`;


$("#result_iframe").contents().find("body").html(`${bodyContent}`);

});
#result_iframe{
   width: 400px;
   height: 200px;
   background:#eaeaed;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

 <button id="resultBtn">see Result</button>


<iframe id="result_iframe" frameborder="0"></iframe>
1
Learner 22 अप्रैल 2020, 16:07
@terrymorse, इस तरह की संपूर्ण html सामग्री <p id="pclick">Click me to see Alert</p><script>document.querySelector('#pclick').on('click',function(){ alert('clicked me'); })</script>
 – 
Learner
22 अप्रैल 2020, 16:41
ऐसा नहीं है कि एक आईफ्रेम कैसे काम करता है।
 – 
terrymorse
22 अप्रैल 2020, 17:26
@terrymorse, फिर स्टैक ओवरफ्लो, जेएसफ़िल्ड, कोडपेन का कोड स्निपेट कैसे काम करता है, यह आईफ्रेम के साथ काम करता है
 – 
Learner
22 अप्रैल 2020, 18:02
मैं इस साइट को अपना स्वयं का jsfiddle websanova.com/posts/jquery/… इसका डेमो यहां jsnova.websanova है। कॉम
 – 
Learner
22 अप्रैल 2020, 18:04
मैं एक उत्तर में संदर्भ प्रदान करूंगा।
 – 
terrymorse
22 अप्रैल 2020, 19:15

2 जवाब

मैं कोई विशेषज्ञ नहीं हूं लेकिन मैं समझता हूं कि आप दस्तावेज़ को पढ़ने के बाद जेएस को टेक्स्ट में पास नहीं कर सकते हैं।
यहां संपादक में यह काम नहीं करता, मुझे पता नहीं क्यों, लेकिन एक परीक्षण फ़ाइल में इसने काम किया।
इसे आज़माएं (जेएस एन पैरेंट)।

  <button id="resultBtn">see Result</button>
   <iframe id="result_iframe" frameborder="0"></iframe>
   <script>
     var button = document.getElementById("resultBtn");
     var iframe = document.getElementById("result_iframe");

     button.onclick = function(){
       iframe.contentDocument.body.innerHTML = "<p onclick='window.parent.showAlert()'>Click Me</p>"
     }
     function showAlert(){
       alert("Hi");
     }
   </script>
0
Antonio Torres 22 अप्रैल 2020, 17:06

यह कोड एक iframe में HTML सामग्री जोड़ने का प्रयास कर रहा है:

$("#result_iframe").contents().find("body").html(`${bodyContent}`);

हालांकि, किसी iframe में टेक्स्ट नोड्स या HTML तत्व जोड़ना समर्थित नहीं है। iframe के लिए HTML5 विनिर्देश से:

4.8.5 आईफ्रेम तत्व

सामग्री मॉडल:
कुछ नहीं

और इस संदर्भ में Nथिंग का अर्थ यहां दिया गया है:

जब किसी तत्व का सामग्री मॉडल कुछ भी नहीं होता है, तो तत्व में कोई टेक्स्ट नोड्स (इंटर-एलिमेंट व्हाइटस्पेस के अलावा) और कोई तत्व नोड नहीं होना चाहिए।

यह देखते हुए कि किसी iframe में सामग्री जोड़ना समर्थित नहीं है, किसी भिन्न विधि का उपयोग करना संभवतः एक अच्छा विचार है।

0
terrymorse 22 अप्रैल 2020, 19:33