क्या कोई तरीका है जब माता-पिता पृष्ठ से एक iframe की सामग्री को पूरी तरह से लोड किया गया है?
जवाबों:
<iframe>तत्वों के लिए एक loadघटना है।आप उस घटना को कैसे सुनते हैं, यह आप पर निर्भर करता है, लेकिन आमतौर पर सबसे अच्छा तरीका यह है:
1) अपने आइफ्रेम को प्रोग्रामेटिक रूप से बनाएं
यह सुनिश्चित करता है कि आपके loadश्रोता को हमेशा iframe लोड करने से पहले इसे संलग्न करके बुलाया जाता है ।
<script>
var iframe = document.createElement('iframe');
iframe.onload = function() { alert('myframe is loaded'); }; // before setting 'src'
iframe.src = '...';
document.body.appendChild(iframe); // add it to wherever you need it in the document
</script>2) इनलाइन जावास्क्रिप्ट , एक और तरीका है जिसका उपयोग आप अपने HTML मार्कअप के अंदर कर सकते हैं।
<script>
function onMyFrameLoad() {
alert('myframe is loaded');
};
</script>
<iframe id="myframe" src="..." onload="onMyFrameLoad(this)"></iframe>3) आप तत्व के बाद ईवेंट श्रोता को एक <script>टैग के अंदर भी संलग्न कर सकते हैं , लेकिन ध्यान रखें कि इस मामले में, इस बात की थोड़ी सी संभावना है कि आइफ्रेम आपके श्रोता को जोड़ने के लिए समय से पहले ही लोड हो गया है। इसलिए यह संभव है कि इसे नहीं कहा जाएगा (जैसे कि अगर iframe बहुत तेज है, या कैश से आ रहा है)।
<iframe id="myframe" src="..."></iframe>
<script>
document.getElementById('myframe').onload = function() {
alert('myframe is loaded');
};
</script>मेरे अन्य उत्तर भी देखें कि कौन से तत्व इस प्रकार की loadघटना को भी आग लगा सकते हैं
addEventListenerजो कई कॉलबैक लोड घटना पर चलाने के लिए अनुमति देता है।
उपरोक्त में से किसी भी उत्तर ने मेरे लिए काम नहीं किया, हालांकि यह किया
अद्यतन :
जैसा कि @doppleganger ने नीचे बताया है, लोड jQuery 3.0 के रूप में चला गया है, इसलिए यहां एक अद्यतन संस्करण का उपयोग किया गया है on। कृपया ध्यान दें कि यह वास्तव में jQuery 1.7+ पर काम करेगा, इसलिए आप इसे इस तरह से लागू कर सकते हैं, भले ही आप अभी तक jQuery 3.0 पर नहीं हैं।
$('iframe').on('load', function() {
// do stuff
});loadचला गया है। कृपया .on('load', function() { ... })इसके बजाय उपयोग करें ।
jqueryया jqLiteफिर यह रास्ता तय करना है!
इसके लिए वेनिला जावास्क्रिप्ट में एक और सुसंगत तरीका है ( केवल IE9 + के लिए ):
const iframe = document.getElementById('iframe');
const handleLoad = () => console.log('loaded');
iframe.addEventListener('load', handleLoad, true)और अगर आप वेधशालाओं में रुचि रखते हैं तो यह चाल है:
return Observable.fromEventPattern(
handler => iframe.addEventListener('load', handler, true),
handler => iframe.removeEventListener('load', handler)
);handleLoad()इससे पहले कि मैं iFrame रेंडर देखता हूं क्या यह एक चिंता है कि मेरा डिबगर मेरे ब्रेकपॉइंट पर रुकता है ? मुझे आशा है कि सामग्री लोडिंग समस्या के बजाय विशुद्ध रूप से एक प्रतिपादन मुद्दा है।
ध्यान दें कि अगर स्क्रीन को ऑफस्क्रीन लोड किया जाता है तो ऑनलोड घटना में आग नहीं लगती है। "ओपन इन न्यू विंडो" / w टैब का उपयोग करते समय यह अक्सर होता है।
तुम भी इस तरह से jquery तैयार घटना पर कब्जा कर सकते हैं:
$('#iframeid').ready(function () {
//Everything you need.
});यहाँ एक काम कर उदाहरण है: