Question

我使用$iframe.contents().find('body').html(contentBody);

填充基本HTML的空iframe

这适用于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执行之前让其余的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。

iframe内容在Firefox上消失了

2 个答案: