HTML怎么解决404状态码引起的onerror循环-html教程-PHP中文网

必须写onerror="this.src='/fallback.svg'; this.onerror=null;"切断事件链，fallback图优先用绝对路径或base64内联SVG，杜绝二次404。

html怎么解决404状态码引起的onerror循环

onerror 触发后 fallback 图又 404 怎么办

最典型的死循环：图片加载失败触发 onerror，执行 this.src = '/fallback.jpg'，但 fallback 图本身也不存在，再次触发 onerror，无限重试卡死页面。

根本原因是没切断事件链。浏览器不会自动阻止第二次加载失败的事件，必须手动干预。

写法必须是：onerror="this.src='/fallback.svg'; this.onerror=null;" —— 关键在末尾的 this.onerror=null
fallback 资源必须确保可达：优先用绝对路径（/assets/404.svg），或内联 base64（data:image/svg+xml;base64,PHN2Zy...）
避免相对路径：./img/missing.png 在不同 URL 上解析基准不同，极易二次 404
别用 JS 动态插入再绑定：img.addEventListener('error', ...) 太晚，onerror 属性必须内联写在标签里

为什么 `onerror` 在 iframe 或 script 中不生效

和 <script></script> 的 onerror 行为和不同：它们只在资源加载失败时触发（如 404、CORS），但不捕获超时、解析错误或网络中断；且旧版 Safari 对的 onerror 完全不支持。

<script src="app.js" onerror="this.src='fallback.js'"></script> 必须写在 HTML 标签内，不能靠外部 JS 绑定
CSS fallback 需兜底检测：document.styleSheets[0]?.cssRules?.length === 0 判断是否为空，再手动注入内联样式
script fallback 后务必清空 onerror，否则第二次失败不会触发：onerror="this.src='fallback.js'; this.onerror=null;"
CDN 切本地时，fallback 路径建议用相对路径（如 ./app.fallback.js），兼容 file:// 协议下测试

fetch 加载 HTML 片段时怎么防 onerror 漏判

用 fetch() 拉 HTML 片段（比如微前端嵌入、CMS 内容块）时，onerror 根本不适用——它只属于 HTML 元素，fetch 是 Promise，得靠 response.ok 和状态码判断。

HTTP状态码查询

查询网站的HTTP响应状态码，判断网站是否正常访问、是否重定向、是否存在错误。适用于"HTTP状态码查询""网站状态查询""HTTP状态检测""网页状态码""网站响应码""301重定向查询"等请求。通过本地 Python 脚本调用网站HTTP状态查询接口，并使用环境变量中的专属 API Key。

下载

必须检查 !response.ok 和 response.status === 404，因为 404 不进 .catch()
加 AbortController 设超时（1500ms），防止 pending 状态卡死，仅靠 .catch() 抓不到
对返回文本做最小结构校验：html.trim().startsWith(' 或 html.includes('')，避免把服务端错误页当内容插入
不要直接 el.innerHTML = html，先创建 DOMParser 解析，捕获解析异常再 fallback


SPA 路由中 404 页面无法返回真实状态码怎么办
React/Vue 项目用 try_files $uri $uri/ /index.html 后，所有路径都落到 index.html，JS 路由接管——但服务端始终返回 200，onerror 类逻辑完全失效，用户看到“404 组件”时实际状态码仍是 200。

真正返回 404 状态码必须靠服务端：Nginx 对已知路由前缀（如 /api/、/static/）显式放行，其余路径 return 404;，再配 error_page 404 /404.html;

若用 Vercel/Netlify，需平台级配置：[[redirects]] from = "/*" to = "/404.html" status = 404

Next.js/VitePress 等框架生成的 pages/404.js 会自动返回 404 状态，但前提是构建产物中真有该路由，且未被 rewrites 覆盖
别在客户端用 history.replaceState(null, '', '/404') 伪造——状态码还是 200，Google Search Console 会标为 soft 404

真正难的不是写个 fallback，而是让 fallback 资源本身不成为新的 404 源头。所有路径、协议、部署环境都要对齐，否则一个 onerror 就可能引发雪崩。