未定义动态创建的iframe的contentWindow

Question

这是有问题的javascript代码

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属性
• 必须将iframe附加到DOM才能加载
• iframe不会立即加载也不会同步加载

所以你可以使用vanilla-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');