iframe 内容在 Firefox 上消失答案

【问题标题】：iframe content disappears on Firefoxiframe 内容在 Firefox 上消失
【发布时间】：2012-04-01 19:22:22
【问题描述】：

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

见：http://jsfiddle.net/UjT2b/2/

这在 Chrome 上运行良好。在 Firefox 上，我可以非常简短地看到里面的内容，但随后它突然消失了。当我用 Firebug 在这一行设置断点，然后继续运行时，内容留在里面。但是如果我在之后的行上设置一个断点，它就会消失。

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

【问题讨论】：

这是正确的小提琴吗？我没有看到任何与 iframe 相关的内容。
好的，我在 Chrome、Safari 和 Firefox 上得到了相同的结果。我在 Mac 上使用 Firefox 11。会不会是别的？
小提琴奏效。但我在我的应用程序中做同样的事情，但事实并非如此。奇怪的是断点解决了问题。所以我不知道如何调试它。
好的，似乎将线路放入 setTimeout（即使是 1 毫秒）可以解决问题。不过我还是想知道为什么。
stackoverflow.com/questions/7828502/… 看起来可能是相关的。显然，如果您在文档完成加载之前进行更改，firefox 会在加载结束时用空白覆盖。如果发生这种情况，Document.onload 可能会比超时更好地为您服务。

标签： javascript jquery iframe

【解决方案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);
}

【讨论】：

【解决方案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。

【讨论】：