क्यों iframe मेरी html सामग्री को टेक्स्ट सामग्री के रूप में मान रहा है।
प्रश्न: मैं संपूर्ण HTML को उसके टैग के साथ प्रस्तुत करना चाहता हूं, पाठ के रूप में नहीं।
नीचे दी गई छवि मेरी समस्या दिखाती है:
मेरा कोड:
$('#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>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>
यह कोड एक iframe में HTML सामग्री जोड़ने का प्रयास कर रहा है:
$("#result_iframe").contents().find("body").html(`${bodyContent}`);
हालांकि, किसी iframe में टेक्स्ट नोड्स या HTML तत्व जोड़ना समर्थित नहीं है। iframe के लिए HTML5 विनिर्देश से:
4.8.5 आईफ्रेम तत्व
सामग्री मॉडल:
कुछ नहीं
और इस संदर्भ में Nथिंग का अर्थ यहां दिया गया है:
जब किसी तत्व का सामग्री मॉडल कुछ भी नहीं होता है, तो तत्व में कोई टेक्स्ट नोड्स (इंटर-एलिमेंट व्हाइटस्पेस के अलावा) और कोई तत्व नोड नहीं होना चाहिए।
यह देखते हुए कि किसी iframe में सामग्री जोड़ना समर्थित नहीं है, किसी भिन्न विधि का उपयोग करना संभवतः एक अच्छा विचार है।
<p id="pclick">Click me to see Alert</p><script>document.querySelector('#pclick').on('click',function(){ alert('clicked me'); })</script>