आईफ्रेम सामग्री लोड होने पर पता लगाना (क्रॉस ब्राउज़र)

Question

मैं यह पता लगाने की कोशिश कर रहा हूं कि एक आईफ्रेम और इसकी सामग्री लोड हो गई है लेकिन बहुत भाग्य नहीं है। मेरा एप्लिकेशन पैरेंट विंडो में टेक्स्ट फ़ील्ड्स में कुछ इनपुट लेता है और आईफ्रेम को 'लाइव पूर्वावलोकन' प्रदान करने के लिए अपडेट करता है

मैंने आईफ़्रेम लोड ईवेंट होने पर पता लगाने के लिए निम्न कोड (वाईयूआई) से शुरुआत की।

$E.on('preview-pane', 'load', function(){ 
    previewBody = $('preview-pane').contentWindow.document.getElementsByTagName('body')[0]; 
} 

'पूर्वावलोकन-फलक' मेरे आईफ्रेम की आईडी है और मैं ईवेंट हैंडलर को संलग्न करने के लिए वाईयूआई का उपयोग कर रहा हूं। हालांकि, मेरे कॉलबैक (आईफ्रेम लोड पर) में शरीर तक पहुंचने का प्रयास करने में विफल रहता है, मुझे लगता है क्योंकि ईवेंट हैंडलर तैयार होने से पहले आईफ्रेम लोड होता है। यह कोड काम करता है अगर मैं php स्क्रिप्ट बनाकर iframe लोडिंग में देरी करता हूं जो इसे नींद उत्पन्न करता है।

मूल रूप से, मैं क्या ब्राउज़रों में सही दृष्टिकोण जब आइफ्रेम लोड होते ही पता लगाने के लिए है और इसकी दस्तावेज़ तैयार है पूछ रहा हूँ?

Answer 1

जब आइफ्रेम लोड होते ही पता लगाने के लिए और उसके दस्तावेज़ में जोड़ने के लिए तैयार है?

यह आदर्श है अगर आप फ्रेम के अंदर एक स्क्रिप्ट से खुद को बताने के लिए iframe प्राप्त कर सकते हैं। उदाहरण के लिए यह सीधे माता-पिता को यह बताने के लिए कह सकता है कि यह तैयार है। क्रॉस-फ्रेम कोड निष्पादन के साथ हमेशा देखभाल की आवश्यकता होती है क्योंकि चीजें ऐसी क्रम में हो सकती हैं, जिसकी आप अपेक्षा नहीं करते हैं। एक और विकल्प 'var isready = true;' को अपने दायरे में सेट करना है, और 'contentWindow.isready' के लिए अभिभावक स्क्रिप्ट स्नीफ है (और यदि नहीं हो तो ऑनलोड हैंडलर जोड़ें)।

किसी कारण यह iframe दस्तावेज़ सहयोग के लिए व्यावहारिक नहीं है के लिए, यदि आप पारंपरिक लोड दौड़ समस्या मिल गया है, तो अर्थात् है कि भले ही तत्व सही एक दूसरे के बगल हैं:

<img id="x" ... /> 
<script type="text/javascript"> 
    document.getElementById('x').onload= function() { 
     ... 
    }; 
</script> 

इस बात की कोई गारंटी नहीं है कि स्क्रिप्ट निष्पादित होने तक आइटम पहले ही लोड नहीं होगा।

लोड दौड़ से बाहर तरीके हैं:

1. IE पर, आप अगर कुछ पहले से ही भरी हुई है देखने के लिए 'readyState' संपत्ति का उपयोग कर सकते हैं;

2. यदि आइटम केवल जावास्क्रिप्ट सक्षम के साथ उपलब्ध है, तो यह स्वीकार्य है, आप इसे गतिशील रूप से बना सकते हैं, स्रोत सेट करने और पृष्ठ में जोड़ने से पहले 'ऑनलोड' ईवेंट फ़ंक्शन सेट कर सकते हैं। इस मामले में कॉलबैक सेट होने से पहले इसे लोड नहीं किया जा सकता है;

3. मार्कअप में शामिल की ओल्ड-स्कूल रास्ता:

   <img onload="callback(this)" ... />

इनलाइन 'onsomething' HTML में संचालकों लगभग हमेशा गलत बात कर रहे हैं और परहेज किया जाता है, लेकिन इस में कभी-कभी यह कम से कम खराब विकल्प होता है।

Answer 2

this ब्लॉग पोस्ट देखें। यह jQuery का उपयोग करता है, लेकिन अगर आप इसका उपयोग नहीं कर रहे हैं तो भी आपको इसकी मदद करनी चाहिए।

मूल रूप से आप अपने document.ready()

$('iframe').load(function() { 
    RunAfterIFrameLoaded(); 
}); 

Answer 3

प्रतिक्रिया का उपयोग करने वालों के लिए, एक ही मूल iframe लोड ईवेंट का पता लगाने के रूप में iframe तत्व पर onLoad ईवेंट श्रोता सेट करने जितना आसान है।

<iframe src={'path-to-iframe-source'} onLoad={this.loadListener} frameBorder={0} />

Answer 4

एंबर का उपयोग कर किसी के लिए, यह काम करना चाहिए के रूप में उम्मीद:

<iframe onLoad={{action 'actionName'}} frameborder='0' src={{iframeSrc}} />