contenuti iframe scompare su Firefox

Question

sto riempiendo un iframe vuota con HTML di base, utilizzando $iframe.contents().find('body').html(contentBody);

See: http://jsfiddle.net/UjT2b/2/

Questo funziona bene su Chrome. Su Firefox, posso vedere molto brevemente il contenuto all'interno, ma poi improvvisamente scompare. Quando imposto un breakpoint su questa linea con Firebug, quindi continua a correre, il contenuto rimane all'interno. Ma se ho impostato un breakpoint sulla linea dopo, va via.

Qualsiasi indizio su come risolvere questo problema?

Answer 1

Non riesco a vedere l'intero codice, ma ho lavorato con quello che mi hai dato in un modo che avrei fatto. C'è la possibilità che tu non stia dando allo script la possibilità di lasciare il resto del carico HTML prima che venga eseguito e quindi possono accadere cose imprevedibili. Trovo che se non aspetto che la finestra si carichi, l'immagine non verrà visualizzata. Se Encase tutto quello che hai fatto, come qui di seguito, allora non dovreste avere un problema:

$(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); 

}); 

Basta ricordare che jQuery.html() sostituirà tutto il codice HTML all'interno dell'elemento dato.

Answer 2

Ho riscontrato un problema simile durante il tentativo di riempire iframe creato in modo dinamico. L'utilizzo dell'evento onload dell'iframe ha risolto la situazione per me. Come visto la soluzione onload non funziona per altri browser oltre a FF, da qui il modo standard conservato.

/** 
* 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); 
}