跳到主要内容

iframe 元素的 onLoad 事件一直不被触发的原因

在 iframe srcdoc 中有一行这样的元素:

<img alt="养老家属管理系统" class="w-full h-full object-cover" onerror="this.src='https://via.placeholder.com/400x200?text=智慧养老守护';" src="https://images.unsplash.com/photo-1581578731522-99c5fbd69bd0?auto=format&amp;fit=crop&amp;q=80&amp;w=800"/>

其中 src获取图片是 404,于是会 callback 到 onError 中,但是 onError 中的 url 也是请求不到图片的。于是导致一直在请求,导致 onLoad 一直不触发

单纯“图片 404”这件事,本身通常不会阻止 iframeonload。图片加载失败后,页面里的 <img> 会触发自己的 error 事件,但文档整体仍然可以继续完成加载,iframe 最终还是可以收到 load

真正可能卡住的是这行的写法:

<img
...
onerror="this.src='https://via.placeholder.com/400x200?text=智慧养老守护';"
src="https://images.unsplash.com/..."
/>

问题不在“第一次图片 404”,而在于:

  • 原图加载失败后,会进入 onerror
  • onerror 里又把 src 改成一个新的远程地址
  • 如果这个兜底图也失败了,onerror 会再次触发
  • 由于你没有先清掉 onerror,它可能反复重试,形成循环

这种情况下,iframe 里的页面可能一直处于“还有资源在加载/重试”的状态,于是你看到 iframe onLoad 像是一直不触发。

更稳的写法是先移除错误处理,再设置兜底图:

<img
alt="养老家属管理系统"
class="w-full h-full object-cover"
src="https://images.unsplash.com/photo-1581578731522-99c5fbd69bd0?auto=format&fit=crop&q=80&w=800"
onerror="this.onerror=null; this.src='https://via.placeholder.com/400x200?text=智慧养老守护';"
/>

如果你想彻底避免外网资源导致的这类问题,最好直接改成:

  • 本地静态图片
  • 或 base64/data URL
  • 或一个纯色/渐变占位块

结论是:不是“404 图片必然导致 iframe 不触发 onload”,而是这个 onerror 回退逻辑在失败时可能进入重复加载,间接让 iframe 的 load 一直等不到稳定结束。如果你需要,我可以直接帮你把这个点改成不会循环失败的版本。