iframe内容在Firefox上消失了

Question

我使用基本HTML填充空iframe $iframe.contents().find('body').html(contentBody);

请参阅:http://jsfiddle.net/UjT2b/2/

这适用于Chrome.在Firefox上,我可以非常简单地看到里面的内容,但随后它突然消失了.当我使用Firebug在此行上设置断点,然后继续运行时,内容保持在内部.但如果我在线上设置断点,它就会消失.

关于如何解决这个问题的任何线索？

Answer 1

我在尝试填充动态创建的iframe时遇到了类似的问题.使用iframe onload事件为我解决了这个问题.正如所见,onload解决方案不适用于除FF以外的其他浏览器,因此保留了标准方式.

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

Answer 2

我看不到你的完整代码，但已经以我愿意的方式使用了你给我的代码。您可能没有让脚本有机会在执行之前加载其余的 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 );

});

请记住，jQuery.html() 将替换给定元素内的所有 HTML。