jQuery iframe लोड() घटना?

Question

क्या किसी को पता है कि ऐसी कोई चीज़ है या नहीं?

मैं एक iframe कि $.ajax() साथ डाला जा रहा है है और मैं कुछ सामान करना चाहता हूँ के बाद iframe से सामग्री पूरी तरह से लोड कर रहे हैं:

.... 
success: function(html){ // <-- html is the IFRAME (#theiframe) 
      $(this).html(html); // $(this) is the container element 
      $(this).show(); 
      $('#theiframe').load(function(){ 
      alert('loaded!'); 
      } 
.... 

यह काम करता है, लेकिन मैं देख रहा हूँ IFRAME दो बार भरी हुई है (अलर्ट भी दो बार दिखाता है)।

Answer 1

यदि संभव हो, तो आप iframe के दस्तावेज़ में load ईवेंट को संभालने और उस दस्तावेज़ में किसी फ़ंक्शन को कॉल करने से बेहतर होंगे। यह सभी ब्राउज़रों में काम करने का लाभ है और केवल एक बार चल रहा है।

मुख्य दस्तावेज़ में:

function iframeLoaded() { 
    alert("Iframe loaded!"); 
} 

आइफ्रेम दस्तावेज़ में:

window.onload = function() { 
    parent.iframeLoaded(); 
} 

Answer 2

आप iframe की सामग्री प्राप्त करने के लिए jquery's Contents विधि का उपयोग कर सकते हैं।

Answer 3

यह वही व्यवहार है जो मैंने देखा है: iframe's load() एक खाली आईफ्रेम पर पहली बार आग लग जाएगा, फिर दूसरी बार जब आपका पृष्ठ लोड हो जाएगा।

संपादित करें: हम्म, दिलचस्प। आप अपने ईवेंट हैंडलर में काउंटर बढ़ा सकते हैं, और ए) पहले load ईवेंट को अनदेखा कर सकते हैं, या बी) किसी भी डुप्लिकेट load ईवेंट को अनदेखा करें।

Answer 4

आप इसे अधिक सामान्य और स्वतंत्र होना चाहते हैं, तो आप कुकी का उपयोग कर सकते हैं। Iframe सामग्री एक कुकी सेट कर सकते हैं। Jquery.cookie और टाइमर (या इस मामले में जावास्क्रिप्ट टाइमर) के साथ, आप जांच सकते हैं कि कुकी प्रत्येक सेकेंड या तो सेट है या नहीं।

//token should be a unique random value which is also sent to ifame to get set 
iframeLoadCheckTimer = window.setInterval(function() { 
     cookieValue = $.cookie('iframeToken'); 
     if (cookieValue == token) 
     { 
      window.clearInterval(iframeLoadCheckTimer); 
      $.cookie('iframeToken', null, { 
       expires: 1, 
       path: '/' 
     }); 
     } 
}, 1000); 

Answer 5

Tim Down's answer की पंक्तियों के साथ

लेकिन jQuery लाभ (ओ पी ने उल्लेख किया) और शिथिल युक्त पेज और iframe युग्मन, आप निम्न कर सकता है:

iframe में:

<script> 
    $(function() { 
     var w = window; 
     if (w.frameElement != null 
       && w.frameElement.nodeName === "IFRAME" 
       && w.parent.jQuery) { 
      w.parent.jQuery(w.parent.document).trigger('iframeready'); 
     } 
    }); 
</script> 

युक्त पेज में:

<script> 
    function myHandler() { 
     alert('iframe (almost) loaded'); 
    } 
    $(document).on('iframeready', myHandler); 
</script> 

ifra मैं (संभावित रूप से मौजूदा) पैरेंट विंडो के दस्तावेज़ पर एक घटना को आग लगाता हूं - कृपया सावधान रहें कि इस दस्तावेज़ के लिए मूल दस्तावेज़ को स्वयं के jQuery उदाहरण की आवश्यकता है। फिर, पैरेंट विंडो में आप उस ईवेंट पर प्रतिक्रिया करने के लिए एक हैंडलर संलग्न करते हैं।

इस समाधान में ब्रेकिंग का लाभ नहीं है जब युक्त पृष्ठ में अपेक्षित लोड हैंडलर नहीं होता है। आमतौर पर बोलते हुए, यह आसपास के पर्यावरण को जानने के लिए आईफ्रेम की चिंता नहीं होनी चाहिए।

कृपया ध्यान दें, कि हम घटना को आग लगाने के लिए डीओएम तैयार कार्यक्रम का लाभ उठा रहे हैं - जो अधिकांश उपयोग मामलों के लिए उपयुक्त होना चाहिए।कोड के बिना iframe + चेतन में

$(window).on('load', function() { ... }); 

Answer 6

उपयोग iframe onload event

$('#theiframe').on("load", function() { 
    alert(1); 
}); 

Answer 7

:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
<script language="javascript" type="text/javascript"> 

function resizeIframe(obj) { 

    jQuery(document).ready(function($) { 

     $(obj).animate({height: obj.contentWindow.document.body.scrollHeight + 'px'}, 500) 

    }); 

}  
</script> 
<iframe width="100%" src="iframe.html" height="0" frameborder="0" scrolling="no" onload="resizeIframe(this)" >