无法在 FF 或 IE 中写入 iframe，只有 Chrome

Question

如果你在 CHrome 中运行这个 jsfiddle，它会工作，但在 IE 和 FF 上它会失败：http://jsfiddle.net/LbFPu/2/

我想这与每个引擎如何写入 DOM 有关吗？有什么办法可以等待以前的内容写完吗？例如：

function firstMe(){
    $('body').append('<div id="first"></div>');
    // many other new elements appended
}

function thenMe(){
    $('#first').append('etc');
    // many of the recently appended elements being referenced
}

当按顺序调用时，我想它会在 Chrome 中正常工作，但在 IE 和 FF 中则不行。从 jsfiddle 结果来看。

以前有人处理过这个问题吗？

Answer 1

在 FF 中，如果您在小提琴的最后一行周围添加 setTimeout()，它会起作用：

$('body').append('<iframe id="upload"></iframe>');
var form = $('<form enctype="multipart/form-data" id="image_upload" action="index.php">' + 
    '<input type="file" accept="image/*" multiple name="img[]" id="image" />' + '<br>' + 
    '<input type="submit" value="Upload images" class="upload" />' + '</form>');
setTimeout(function () {
    $('#upload').contents().find('body').append(form);
}, 100);

Answer 2

这只是因为您正在尝试写入尚未加载的 iframe，似乎 chrome 更快：

$('body').append('<iframe id="upload"></iframe>');
var form = $('<form enctype="multipart/form-data" id="image_upload" action="index.php">'
     + '<input type="file" accept="image/*" multiple name="img[]" id="image" />'
     + '<br>'
     + '<input type="submit" value="Upload images" class="upload" />'
     + '</form>');

$('#upload').on('load', function() {
    $(this).contents().find('body').append(form);
});

FIDDLE