2010-12-22 15 views
12

उदाहरणों के उदाहरण दिखाते हैं कि गतिशील रूप से iframe की ऊंचाई को अपनी सामग्री में कैसे सेट करें। यह मेरे लिए सही काम करता है। अब मेरी समस्या यह है कि सामग्री onload ट्रिगर किए बिना आकार बदल सकती है (सोचें छुपा/विस्तार योग्य div एस)।आईफ़्रेम सामग्री ऊंचाई परिवर्तन

क्या यह पता लगाने का कोई तरीका है कि iframe सामग्री का आकार बदल गया है? यह एक ही डोमेन पर है और कोई jQuery नहीं है, कृपया।

उत्तर

14

मैं setInterval का उपयोग करके नियमित रूप से मतदान (शायद हर 200 मिलीसेकंड, शायद अधिक बार) मतदान करके ऐसा करता हूं। फिर आप सामग्री के आकार की तुलना आखिरी बार की तुलना में कर सकते थे।

var iframe = document.getElementById('myIframe'), 
    lastheight; 

setInterval(function(){ 
    if (iframe.document.body.scrollheight != lastheight) { 
     // adjust the iframe's size 

     lastheight = iframe.document.body.scrollheight; 
    } 
}, 200); 
+0

मैंने इस बारे में सोचा था, लेकिन फिर मैंने https://developer.mozilla.org/en/DOM/Detecting_document_width_and_height_changes पढ़ा: 'जबकि आप दस्तावेज़ में परिवर्तनों को देखने के लिए document.scrollWidth और document.scrollHeight के मानों को मतदान कर सकते हैं। आकार, इन गुणों को पढ़ने से दस्तावेज़ रीफ्लो ट्रिगर हो सकता है, जो उन्हें कम्प्यूटेशनल रूप से महंगा बना सकता है। 'मैं इसे किसी भी तरह से कोशिश करूंगा। –

+0

@ नेल्सन दिलचस्प, उसे नहीं पता था। मुझे नहीं पता कि यह लागू है या नहीं (यह किसी तत्व की स्क्रोलहेइट की बजाय 'document.scrollheight' को संदर्भित करता है, लेकिन शायद यह नजर रखने के लिए कुछ है। आप हमेशा मतदान आवृत्ति को कम कर सकते हैं ... – lonesomeday

+0

अच्छा बिंदु, मैं ' मैं 'document.body.scrollHeight' कर रहा हूं। प्रदर्शन हिट मेरे कंप्यूटर पर आईई में ध्यान देने योग्य नहीं है। मैं अन्य ब्राउज़रों को आजमाउंगा, लेकिन अब तक ऐसा लगता है जैसे यह काम करेगा। –

0

गैर वेबकिट ब्राउज़रों के लिए, वहाँ कुछ domMutation-घटनाक्रम, कि आग जब एक तत्व की एक विशेषता (जैसे शरीर तत्व) परिवर्तन। DOMSubtreeModified और अधिक महत्वपूर्ण रूप से DOMAttrModified देखें।

इंटरनेट एक्सप्लोरर गैर-विंडोज तत्वों पर भी ऑनरेज़ ईवेंट को आग लगा देता है।

ओपेरा domMutation घटनाओं का सम्मान करता है।

अन्य पर वेबकिट ने इन घटनाओं को गति और जावास्क्रिप्ट-प्रदर्शन को प्रस्तुत करने के लिए एक समझौता के रूप में त्याग दिया। टाइमआउट/अंतराल के माध्यम से तत्व के प्रभावी आकार के माध्यम से जांच करने की तुलना में कोई अन्य तरीका नहीं है।

+0

मैंने आईई में 'ऑन्रेसिज' की कोशिश की और यह पृष्ठ लोड होने के कारण आग लगती है, लेकिन div के विस्तार के बाद नहीं। –

संबंधित मुद्दे