Невозможно записать в IFrame в FF или IE, только Chrome

Question

Если запустить этот 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 
} 

При вызове в порядке, я думаю, что это будет работать должным образом в хроме, но не в IE & FF. Судя по результату jsfiddle.

Кому-нибудь приходилось иметь дело с этим раньше?

Answer 1

Это только потому, что вы пытаетесь написать к IFRAME, который еще не загружен, кажется, хром быстрее:

$('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

Answer 2

В 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);