动态创建的 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');