应提前拦截iframe加载失败并展示layui风格的自定义404页，通过onerror+超时双保险检测，结合权限校验与路径验证防患未然，同时保留原始url供调试和重试。
子页面报 404，本质是 iframe 加载失败——不是后端返回 HTTP 404 状态码，而是浏览器无法定位到该 HTML 文件或路由未命中。Layui 后台框架中，菜单跳转常通过 layer.open({ type: 2, content: 'xxx.html' }) 打开子页面，一旦 content 路径错误、文件缺失、权限拦截或跨域限制，iframe 就会白屏或显示浏览器默认错误页，体验极差。要“优雅处理”，核心是**提前拦截加载失败、主动渲染友好提示、保留上下文可操作性**，而非依赖浏览器兜底。
检测并捕获 iframe 加载失败
iframe 自身提供 onerror 事件，但仅对资源加载失败（如 404、403、跨域）有效；对后端返回 200 但内容为空或 JS 报错则不触发。稳妥做法是双保险：
- 在
layer.open的success回调里，获取 iframe DOM，绑定onload和onerror - 设置超时兜底：若 3 秒内 iframe 未完成加载且无响应，视为失败
用自定义视图替换空白 iframe
不要直接显示“找不到页面”文字，应复用 Layui 布局风格，保持视觉统一：
- 准备一个轻量级的 404 子页面模板（如
/error/iframe-404.html），含 Layui 样式、图标、简短说明和「返回上一页」按钮 - 加载失败时，用
iframe.contentWindow.document.write()或替换iframe.src指向该模板 - 按钮行为建议调用
parent.layer.close(parent.layer.getFrameIndex(window.name))关闭当前弹层
结合权限与路由做前置校验
很多“404”实际是权限不足导致后端拒绝返回页面（返回 403 或空响应），或前端菜单配置了不存在的路径。更优雅的方式是防患于未然：
- 点击菜单前，先请求
/api/menu/validate?path=/user/edit接口，服务端校验该路径是否对当前用户可访问 - 校验失败时，不执行
layer.open，而是直接layer.msg('暂无权限', {icon: 5})提示 - 菜单 JSON 数据中为每项增加
available: true/false字段，前端渲染时隐藏不可见项，从源头减少误点
保留原始 URL 便于调试与重试
用户看到错误页时，应清楚知道“想打开的是哪个地址”。可在自定义 404 视图中显示：
- 当前尝试加载的完整路径（来自
layer.open的content参数） - 一个「复制地址」按钮，方便开发人员快速复现
- 一个「重新加载」按钮，执行
iframe.src = iframe.src，适用于偶发网络抖动
