iframe Inhalt verschwindet auf Firefox

Question

Ich bin ein leeres iframe mit einfachen HTML-Füllung, $iframe.contents().find('body').html(contentBody);

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

Dieses gut auf Chrome funktioniert. Bei Firefox kann ich den Inhalt sehr kurz sehen, aber dann verschwindet er plötzlich. Wenn ich einen Haltepunkt in dieser Zeile mit Firebug setze und dann weiterlaufe, bleibt der Inhalt drin. Aber wenn ich danach einen Haltepunkt auf der Linie setze, geht es weg.

Irgendwelche Hinweise, wie Sie das beheben können?

Answer 1

Ich kann nicht Ihren gesamten Code sehen, aber habe mit dem gearbeitet, was Sie mir auf eine Weise gegeben haben, dass ich es tun würde. Es besteht die Möglichkeit, dass Sie dem Skript nicht die Möglichkeit geben, den Rest des HTML-Dokuments laden zu lassen, bevor es ausgeführt wird und somit unvorhersehbare Dinge passieren können. Ich stelle fest, dass das Bild nicht angezeigt wird, wenn ich nicht auf das Laden des Fensters warte. Wenn Sie alles umhüllen Sie unten tat, wie, dann sollten Sie kein Problem haben:

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

}); 

Denken Sie daran, dass jQuery.html() ersetzt alle HTML innerhalb des gegebenen Elements.

Answer 2

Ich habe ähnliches Problem beim Versuch, dynamisch erstellten Iframe zu füllen. Die Verwendung des Iframe-Onload-Ereignisses löste die Situation für mich. Wie zu sehen ist, funktioniert die Onload-Lösung nicht für andere Browser als FF, daher der beibehaltene Standardweg.

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