contenido anidado desaparece en Firefox

Question

estoy llenando un iframe vacío con HTML básico, utilizando $iframe.contents().find('body').html(contentBody);

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

Esto funciona bien en Chrome. En Firefox, puedo ver muy brevemente el contenido en el interior, pero luego desaparece de repente. Cuando establezco un punto de interrupción en esta línea con Firebug, luego sigo corriendo, el contenido permanece dentro. Pero si establezco un punto de interrupción en la línea después, desaparece.

¿Alguna pista sobre cómo solucionarlo?

Answer 1

No puedo ver el código completo, pero he trabajado con lo que me diste de una manera que yo lo haría. Existe la posibilidad de que no le esté dando al guión la oportunidad de dejar que el resto de la carga HTML se ejecute antes y así pueden suceder cosas impredecibles. Encuentro que si no espero a que se cargue la ventana, la imagen no se mostrará. Si se encajona en todo lo que hizo, como el de abajo, entonces no debería haber 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); 

}); 

Sólo recuerde que jQuery.html() se sustituirá todo el código HTML dentro del elemento dado.

Answer 2

He encontrado un problema similar al intentar rellenar el iframe creado dinámicamente. El uso del evento de iframe onload me solucionó la situación. Como se ve, la solución de carga no funciona para otros navegadores que no sean FF, de ahí la forma estándar preservada.

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