contentWindow из динамически созданного фрейма не определен

Question

Это Java-код в вопросе

var tmpIframe, url; 
url = "http://local.custom.com:10000/simple.html"; 
tmpIframe = $("<iframe id='runner'></iframe>").attr('src', url); 
tmpIframe.contentWindow.postMessage('do_something', data); 

Последняя строка фактически выдает это сообщение об ошибке:

Uncaught TypeError: Cannot read property 'postMessage' of undefined 

tmpIframe фактически возвращается в виде списка. Но даже если бы я изменил последнюю строку

tmpIframe[0].contentWindow.postMessage('do_something', data); 

Я все еще получаю такое же сообщение об ошибке

Почему это не правильный код? Нужно ли добавлять iframe в DOM?

Answer 1

Есть три проблемы:

• Вы смесительные Jquery оберток и свойства DOM
• Iframes должны быть приложены к DOM для того, чтобы быть загружен
• Iframes не загружаются сразу и не синхронно

Таким образом, вы можете использовать ванильный JS:

var iframe = document.createElement('iframe'); 
iframe.onload = function() { 
    console.log(iframe.contentWindow); 
    document.body.removeChild(iframe); 
}; 
iframe.src = url; 
document.body.appendChild(iframe); 

или jQuery:

$("<iframe></iframe>") 
.load(function() { 
    console.log($(this).prop('contentWindow')); 
    $(this).remove(); 
}) 
.attr("src", url) 
.appendTo('body');