动态创建iframe的contentWindow未定义

contentWindow of a dynamically created iframe is undefined

本文关键字：contentWindow 未定义 iframe 创建 动态      更新时间：2023-09-26

这是有问题的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?

有三个问题:

  • 你正在混合jQuery包装器和DOM属性
  • Iframes必须被附加到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');
相关文章：