请问动态添加的iframe 怎么监听加载完成？

Question

iframe是动态添加的，然后把图片插入到iframe中，调用打印，可是第一次执行打印的时候是空白的，图片还没有加载完成，我添加了iframe的onload事件，可是并不会执行。请问应该这么判断iframe中的所有元素都加载完毕呢？

var img = new Image();
img.src = '.....';
var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
iframe.contentDocument.body.onload = function(){
    console.log('加载完成');
}
iframe.contentDocument.body.appendChild(img);

Answer 1

------更新------
我看你的代码 onload 还是绑定在 iframe.contentDocument.body 上，你改两个地方应该就能正确执行回调了：

1. onload 绑定在 iframe 上
2. onload 绑定代码写在 document.body.appendChild(iframe) 之前，因为先插入 iframe 的话，可能 iframe 已经加载完了，后面的事件才绑定上，所以回调也就不会执行

上面的第二点我测试过， iframe src 属性加上一个真实链接的话，就不会很快加载完成，所以先插入再绑定 onload 也能正常执行。但是 iframe 没有 src 属性的话，会很快加载完成，事件绑定放在后面很有可能就会失效。
iframe 页面的加载是不可控的，所以保险起见还是把 onload 绑定代码写在 document.body.appendChild(iframe) 之前。

-------原答案------
我试了下你这个代码应该会报错。
在 iframe 没有被插入到页面之前是访问不到 iframe.contentDocument.body 的。而且 onload 事件不应该绑定在 body 上，应该绑定在 iframe 上。

var img = new Image();
img.src = '.....';
var iframe = document.createElement('iframe');
iframe.onload = function(){
    iframe.contentDocument.body.appendChild(img);
    console.log('加载完成');
}