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

Question

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

Irame लोड घटना होने पर पता लगाने के लिए मैंने निम्न कोड (YUI) के साथ शुरुआत की।

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

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

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

Comments

वाईयूआई के साथ शुरू करना एक बुरा विचार है (साथ ही किसी अन्य जेएस लाइब्रेरी)। क्यों? क्योंकि आप बस यह नहीं जान सकते कि पुस्तकालय क्या जादू कर रहा है। यदि वे पूरी तरह से "लोड" का समर्थन नहीं कर सकते हैं, तो आप इसे स्वयं स्पष्ट और पठनीय जावास्क्रिप्ट में बेहतर करेंगे।

— ईसाई

आप अक्सर पुस्तकालय के स्रोत कोड पढ़ सकते हैं @ क्रिसियन। मुझे लगता है कि यह आम तौर पर आपको इस बात पर बहुत अच्छा सुझाव देता है कि यह कैसे करना है चाहे आप अपने कार्यान्वयन का उपयोग करें या नहीं।

— एजेपी

@AJP आपने मेरी बात को गलत समझा। यदि आप कुछ ऐसा कर रहे हैं जिसके बारे में आप निश्चित नहीं हैं, तो कम कोड होना बेहतर है इसलिए त्रुटियों के लिए कम जगह है।

— क्रिश्चियन

निर्भर करता है कि आप इसे कैसे देखते हैं। मुझे पता था कि उस समय YUI का ईवेंट हैंडलिंग काम करता था, इसलिए मुझे कोड के उस हिस्से के बारे में चिंता करने की ज़रूरत नहीं थी। मुझे यह भी पता था कि मुझे अपने स्वयं के एडवेंट हैंडलर को कैसे लिखना है, यह नहीं कि इस समस्या के संबंध में यह यूयूआई से बेहतर काम करता है।

— डेविड स्नेबेल-कॉंट

@ निको प्रश्न YUI को संदर्भित करता है और $ YUI के डोम रैपर के लिए एक उपनाम है।

— डेविड स्नेबेल-कॉंट

Answer 1

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

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

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

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

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

लोड-रेस के तरीके निम्न हैं:

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

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

3. मार्कअप में इसे शामिल करने का पुराना तरीका:

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

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

Comments

धन्यवाद। मेरा समाधान रेडीस्टेट की जांच करता है (यदि मौजूद है), तो शरीर के तत्वों की आंतरिक HTML लंबाई यह देखने के लिए कि क्या यह लोड है। यदि नहीं, तो लोड ईवेंट हैंडलर संलग्न करता है। ठीक काम करने लगता है

— डेविड स्नेबेल-कॉंट

-1 - इनलाइन इवेंट "खराब" नहीं हैं, यह सिर्फ वर्तमान सनक है। वास्तव में, इनलाइन घटनाओं को उनके जादू समकक्षों के विपरीत डिबग और समझना आसान होता है (जो, दूसरी ओर, संलग्न, स्टैक और मूल रूप से उपयोग करना आसान होता है)।

— ईसाई

जब आप एक बहुत लंबी सूची के हर तत्व के लिए एक घटना संलग्न करने की जरूरत है @Christian, इनलाइन घटनाओं भी सबसे अच्छा विकल्प हैं। चूंकि आप सर्वर साइड पर सूची बनाने के लिए पहले से ही लूपिंग कर रहे हैं, इसलिए इनलाइन-इवेंट को भी संलग्न करना अधिक कुशल है।

— 23

@haknick क्या आप सूची में किसी एकल ईवेंट श्रोता का उपयोग नहीं करना चाहेंगे, और ईवेंट प्रतिनिधि का उपयोग करना चाहेंगे? यह अधिक कुशल होगा।

— डेविड स्नेबेल-कॉंट

यदि आइफ्रेम क्रॉस-डोमेन है तो यह काम नहीं करेगा। Iframe के अंदर की स्क्रिप्ट मूल विंडो तक नहीं पहुँच सकती है।

— सुधीर सोमेश्वरा

Answer 2

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

मूल रूप से आप इसे अपने लिए जोड़ते हैं document.ready()

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

Comments

दिलचस्प है, लेकिन मेरे पास जो समस्या है वह लोड घटनाओं और समय के साथ है। मैं उस लेख द्वारा सलाह के रूप में लोड घटना के लिए सुन रहा हूँ।

— डेविड स्नेबेल-कॉंट

मैंने इसके साथ प्रयास किया है console.log। यह iframe लोड होने के बाद लॉग हो जाता है।

— shorif2000

Answer 3

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

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

Comments

क्या onLoadघटना केवल एक ही मूल iframe के लिए ट्रिगर कर सकती है?

— L_K

Answer 4

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

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