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

mcck_hyj
  • 200

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);
回复
阅读 6k
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('加载完成');
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏