2012-04-01 11 views
6

मैं मूल HTML के साथ एक खाली आइफ्रेम भरने कर रहा हूँ पर गायब हो जाता है, $iframe.contents().find('body').html(contentBody);iframe सामग्री फ़ायरफ़ॉक्स

देखें का उपयोग कर: http://jsfiddle.net/UjT2b/2/

यह Chrome पर अच्छी तरह से काम करता है। फ़ायरफ़ॉक्स पर, मैं अंदर सामग्री को बहुत संक्षेप में देख सकता हूं, लेकिन फिर यह अचानक गायब हो जाता है। जब मैं फ़ायरबग के साथ इस लाइन पर ब्रेकपॉइंट सेट करता हूं, तो चलना जारी रखें, सामग्री अंदर रहती है। लेकिन अगर मैं लाइन पर ब्रेकपॉइंट सेट करता हूं, तो यह दूर चला जाता है।

इसे ठीक करने के तरीके पर कोई सुराग?

+0

क्या यह सही पहेली है? मुझे किसी चीज को नहीं दिख रहा है जिसे आईफ्रेम के साथ करना है। –

+0

क्षमा करें, मैंने लिंक संपादित किया है। –

+0

ठीक है, मुझे क्रोम, सफारी और फ़ायरफ़ॉक्स के लिए एक ही परिणाम मिल रहा है। मैं मैक पर फ़ायरफ़ॉक्स 11 का उपयोग कर रहा हूँ। क्या यह कुछ और हो सकता है? –

उत्तर

2

मैं आपका पूरा कोड नहीं देख सकता, लेकिन आपने मुझे ऐसा करने के तरीके के साथ काम किया है जो मैं करूँगा। एक मौका है कि आप स्क्रिप्ट को शेष एचटीएमएल लोड को निष्पादित करने से पहले मौका नहीं दे रहे हैं और इस तरह अप्रत्याशित चीजें हो सकती हैं। मुझे लगता है कि अगर मैं खिड़की को लोड करने की प्रतीक्षा नहीं करता तो छवि दिखाई नहीं देगी। कि jQuery.html() दिए गए तत्व के अंदर सभी HTML का स्थान ले लेगा

$(window).load(function() { 

    var html = "<img src='http://www.google.fr/logos/2011/Louis_Daguerre-2011-hp.jpg' alt='image' />"; 


    $("#myIframe").contents().find('body').html(html); 

}); 

बस इतना ध्यान रखें: तुम सब कुछ तुमने किया था, नीचे की तरह डिब्बे में बंद है, तो आप एक समस्या है नहीं करना चाहिए।

4

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

/** 
* Fills an iframe using data stored within textarea. Useful for creating email 
* template previews 
* 
* @param {String} inputSelector 
* @param {String} outputElemClasses 
* @return void 
*/ 
function displayEmail(inputSelector, outputElemClasses) 
{ 
    $(inputSelector).each(function(i) { 
     var templateData = $(this).text(); 
     var $iframe = $('<iframe></iframe>'); 
     $iframe.addClass(outputElemClasses); 
     $iframe.insertAfter(this); 
     // non-firefox 
     updateIframe($iframe, templateData); 
     // firefox 
     $iframe.load(function(e){ 
      updateIframe($iframe, templateData); 
     }) 
    }) 
} 


/** 
* Fills in target iframe using supplied data 
* 
* @param {Object} $iframe 
* @param {String} data 
* @return void 
*/ 
function updateIframe($iframe, data) 
{ 
    $iframe.contents().find('html').html(data); 
}