jQuery ऑनलोड - .load() - घटना गतिशील रूप से लोड किए गए आईफ्रेम

Question

के साथ काम नहीं कर रही है जब उपयोगकर्ता एक बटन क्लिक करता है तो मेरी स्क्रिप्ट एक आईफ्रेम लोड करती है। मैं आईफ्रेम लोड के बाद एक और फ़ंक्शन कॉल करना चाहता हूं, लेकिन यह काम नहीं कर रहा है। Iframe सामान्य रूप से लोड होता है, लेकिन iframe लोड होने के बाद .load() ईवेंट कभी नहीं कहा जाता है। Iframe में एक ही वेबसाइट से सामग्री शामिल है (कोई बाहरी सामग्री नहीं)। अजीब बात यह है कि मैं अपने कोड में कुछ अन्य बिंदुओं पर नीचे वर्णित एक ही तकनीक का उपयोग कर रहा हूं और यह पूरी तरह से काम करता है। क्या कोई सुझाव दे सकता है कि मुझे आगे क्या जांचना चाहिए?

$('#myIframe').load(function() { 
    alert('iframe loaded'); 
}); 

$('#someButton').live('click', function() { 
    $('body').append($('<iframe id="myIframe" src="https://www.mywebsite.com" width="100%"></iframe>')); 
}); 

Answer 1

कुछ हद तक प्रश्न यहाँ करने के लिए समान लगता है:

jQuery .ready in a dynamically inserted iframe

इस तरह iframe तत्व संलग्न के साथ Dom में मौजूद है

यहाँ प्रासंगिक कोड है। केवल जब आप यूआरएल सेट करते हैं तो यह लोड हो जाएगा, जिस बिंदु से आपने उस लोड फ़ंक्शन को संलग्न किया है जिसे आप अंत में टैग करना चाहते हैं। तो अपने कोड के लिए

$('#someButton').live('click', function() { 

    $('body').append($('<iframe id="myIframe" width="100%"></iframe>')); 
    $('#myIframe').attr('src',"https://www.mywebsite.com"); 

    $('#myIframe').load(function() { 
     alert('iframe loaded'); 
    }); 

}); 

Answer 2

कारण अपने कोड उदाहरण काम नहीं करता है, क्योंकि आप एक तत्व जो मौजूद नहीं है के लिए बाध्य कर रहे हैं, तो डोम में उस तत्व रखने जब यह किसी भी स्थिति load से जुड़ी हैंडलर है घटना। इस प्रयास करें:

$('#someButton').live('click', function() { 
    var $iframe = $('<iframe id="myIframe" src="" width="100%"></iframe>').load(function() { 
     alert('iframe loaded'); 
    }).attr('src', 'https://www.mywebsite.com'); 
    $('body').append($iframe); 
}); 

या अपने मूल कोड के करीब है, तो आप की जगह ले सकता .load().live('load') साथ:

$('#myIframe').live('load', function() { 
    alert('iframe loaded'); 
}); 

$('#someButton').live('click', function() { 
    $('body').append('<iframe id="myIframe" src="https://www.mywebsite.com" width="100%"></iframe>');//notice I removed the $() around the append code as it is unnecessary 
}); 

Answer 3

दस्तावेज़ आप iframe में लोड कर रहे हैं कुछ आप नियंत्रित है, तो लोड हैंडलर डालने की कोशिश उस दस्तावेज़ में। आप iframe लोड के बाद कुछ करने के लिए मूल दस्तावेज़ की जरूरत है आप बच्चे से माता-पिता में एक समारोह कॉल कर सकते हैं:

// in parent doc 
function myIframeLoaded() { 
    // do something 
} 

// in iframe doc 
$(document).load(function() { // or .ready() 
    parent.myIframeLoaded(); 
} 

Answer 4

आज़माएं:

$("<iframe id='myId'></iframe>").appendTo("body") 
    .attr('src', url) 
    .load(function() 
    { 
     callback(this); 
    }); 

बस, कुछ श्रृंखलन जोड़ा तत्व बनाया जहां चयनकर्ता आमतौर पर जाता है (यह संभव है), और इसे शरीर में जोड़ा गया।