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