你碰到的这个问题太典型了——动态往iframe里写图片后再绑load事件，经常会因为图片加载速度比代码执行快，导致事件绑晚了，回调根本触发不了。下面给你几个能覆盖所有场景的靠谱解法：

解法一：先挂监听器，再写图片内容 #

这是最稳妥的思路，确保事件在图片开始加载前就已经“待命”：

// 先拿到目标iframe的document对象
const iframe = document.getElementById(`trial${index}`);
const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;

// 给iframe的document挂一个捕获阶段的load监听器
iframeDoc.addEventListener('load', function(e) {
  // 只处理图片的load事件
  if (e.target.tagName.toLowerCase() === 'img') {
    alert("hi");
    // 这里可以通过e.target拿到当前加载完成的图片，比如e.target.id、e.target.src之类的
  }
}, true); // 第三个参数true很关键，用捕获阶段才能确保不会错过事件

// 再写入图片内容
iframeDoc.open();
iframeDoc.write('<img src="IMAGE URL HERE"/>');
iframeDoc.close();

用事件捕获的好处是，不管图片加载有多快，只要它在iframe里触发load事件，这个监听器都能抓得到，完美解决“绑晚了”的问题。如果你的iframe里有多个图片，这个方法还能一次性监听所有图片的加载，不用逐个绑定。

解法二：绑事件前先检查图片状态 #

如果因为某些原因，你必须先写图片再绑事件，那一定要先检查图片是不是已经加载完了：

const iframe = document.getElementById(`trial${index}`);
const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;

// 先写入图片
iframeDoc.open();
iframeDoc.write('<img src="IMAGE URL HERE"/>');
iframeDoc.close();

// 给浏览器一点时间渲染DOM（用0延迟就行，让事件循环先处理DOM更新）
setTimeout(() => {
  const img = iframeDoc.querySelector('img');
  if (!img) return;

  // 先把回调函数抽出来，方便复用
  function handleImgLoad() {
    alert("hi");
  }

  // 检查图片是否已经加载完成
  // 用naturalWidth判断是为了排除加载失败的情况（失败时complete也可能为true）
  if (img.complete && img.naturalWidth > 0) {
    // 图片已经加载好了，直接执行回调
    handleImgLoad();
  } else {
    // 图片还在加载，正常绑load事件
    img.addEventListener('load', handleImgLoad);
    // 别忘了加error监听，处理加载失败的情况
    img.addEventListener('error', () => {
      console.log('图片加载失败啦');
    });
  }
}, 0);

这里的核心是img.complete和img.naturalWidth > 0的组合判断——前者告诉我们图片是否已经加载完毕，后者则能过滤掉那些加载失败的情况（比如图片地址错了，这时候complete可能也是true，但naturalWidth会是0）。

几个要注意的点 #

• 同源策略限制：这些方法只在iframe和主页面同域的时候生效，如果是跨域iframe，浏览器会禁止你访问内部的DOM和事件，这时候得换别的思路（比如让iframe主动给主页面发消息）。
• 多iframe/多图片的情况：如果有多个iframe，直接循环处理每个iframe就行；如果单个iframe里有多个图片，要么用解法一的事件委托，要么遍历所有img元素逐个检查绑定。
• 避免重复绑定：如果你的代码会多次执行，记得在绑定新的监听器前先移除旧的，不然同一个图片加载完成后会触发多次回调。

这样应该就能彻底解决你之前“断断续续收到提示”的问题了，不管图片加载快还是慢，都能稳稳触发回调。

内容的提问来源于stack exchange，提问作者beepingbopping