HTML捕获onerror死循环怎么应对？防御循环报错修复技巧-html教程-PHP中文网

onerror中仅写this.src会因备用图失败触发无限循环，导致浏览器卡死；必须紧接执行this.onerror=null防重入，且fallback图须用base64或绝对路径确保可访问。

html捕获onerror死循环怎么应对？防御循环报错修复技巧

onerror 里只写 `this.src` 就会卡死

浏览器对 img 的 onerror 事件没有自动防重入机制。一旦备用图也 404，this.src = 'fallback.png' 会再次触发 onerror，形成无限循环——内存暴涨、DevTools 崩溃、页面无响应都是真实后果。

必须在赋值后立刻切断事件绑定：onerror="this.src='fallback.svg'; this.onerror=null"。注意两点：分号不能少；this.onerror=null 必须紧接在赋值语句之后，顺序颠倒就无效。

更稳妥的写法是加路径判别：onerror="if (!this.src.includes('fallback')) { this.src='fallback.svg'; this.onerror=null; }"
推荐 fallback 图用内联 base64 SVG（如 data:image/svg+xml;base64,PHN2Zy...)），彻底规避路径解析失败和跨域拦截
绝对不要用相对路径（如 ./img/fallback.png）——本地双击打开 HTML 或部署路径错位时，90% 的“加载失败”其实是协议或路径解析问题

动态创建的 `img` 元素 onerror 绑定时机不对

用 document.createElement('img') 创建后，再设 img.onerror = handler，很可能第一次加载失败就捕获不到——DOM 解析和资源请求几乎同时发生，事件监听还没挂上，错误就已经抛出了。

正确做法是在 appendChild() 之前完成绑定，且优先用 addEventListener('error', handler) 替代内联属性或直接赋值，避免执行上下文丢失和字符串拼接风险。

静态 HTML 中可接受内联写法，但需严格遵循 this.onerror=null 闭环
动态场景中，addEventListener 是唯一可靠方式；handler 内部仍需做路径判别 + this.onerror = null
若 fallback 图也需异步加载（比如从 CDN 切本地），建议提前预加载该资源，或用 fetch() 检查可用性后再触发替换

`script` 和 `link` 的 onerror 不支持冒泡，且旧 Safari 对 CSS 不触发

script 和 link[rel="stylesheet"] 的 onerror 只在加载失败（404/CORS/网络中断）时触发，不响应超时或语法错误；而且它们的事件不冒泡，只能靠内联属性或捕获阶段监听。

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

旧版 Safari 中，link 的 onerror 几乎不触发，得靠兜底检测：document.styleSheets[0]?.cssRules?.length === 0 来判断是否加载为空。

script 的 fallback 必须内联书写：<script src="main.js" onerror="this.src='fallback.js'; this.onerror=null"></script>
CSS fallback 路径建议用相对路径（如 ./app.css.fallback），否则 file:// 协议下可能解析成系统根目录
避免链式 fallback：一次 fallback 后必须置空 onerror，否则第二次失败不会再次触发

全局监听 `window.addEventListener('error')` 的适用边界

这个 API 主要用于捕获未被 try-catch 拦截的 JS 运行时错误，但它对资源加载失败（img/script）基本无效——资源错误走的是各自标签的 error 事件，不是全局 error。

唯一能用它可靠捕获的资源错误是 script 加载失败，但前提是监听代码必须放在最顶部、内联执行，且要用捕获阶段：window.addEventListener('error', handler, true)。

识别 script 错误要两个条件同时满足：e.target.tagName === 'SCRIPT' 且 !(e instanceof ErrorEvent)
e.target.src 可能是相对路径，需用 new URL(e.target.src, location.href) 标准化
重试前必须先清空 e.target.src，否则浏览器可能直接读缓存，跳过新请求

真正容易被忽略的是：所有 fallback 图都必须确保自身可访问。哪怕逻辑写得再严密，只要 fallback.svg 因路径、协议或 MIME 类型问题无法加载，整个降级链就断了——而这个问题在本地开发时尤其隐蔽。