iframe加载失败时layer弹窗不会自动捕获错误，需在success回调中手动绑定onerror；跨域时onerror失效，须用服务端预检或postmessage方案；v2.8+ content为对象时需轮询获取iframe节点。
iframe加载失败时layer弹窗本身不会自动捕获错误
Layer 的 layer.open() 创建 iframe 弹窗后，内部 <iframe></iframe> 的加载过程完全由浏览器控制，layer 不监听 onerror 或 onload 事件，也不会抛出加载失败的回调。这意味着：即使目标 URL 404、跨域拒绝、网络中断或页面 JS 报错导致白屏，layer 弹窗仍会保持打开状态，且无任何提示。
必须手动在 iframe 载入前注入 error 监听逻辑
由于 layer 创建 iframe 是动态插入 DOM，无法在 HTML 源码中写 onerror，需在 iframe 元素创建后、src 赋值前绑定 onload 和 onerror。Layui 提供了 success 回调，此时 iframe 已插入但尚未开始加载（src 还未设置），是唯一安全时机：
layer.open({
type: 2,
content: '/page.html',
success: function(layero, index) {
const iframe = layero.find('iframe')[0];
// ⚠️ 必须在此处绑定，不能等 onload 触发后再找 iframe
iframe.onerror = function() {
layer.msg('页面加载失败，请检查网络或地址', { icon: 2 });
layer.close(index);
};
iframe.onload = function() {
// 可选：加载成功后做初始化，如 postMessage
};
}
});
-
success是唯一能稳定拿到 iframe DOM 节点的 layer 钩子 - 不要用
setTimeout延迟查找 iframe，DOM 插入和 src 设置几乎同步，延迟可能错过绑定时机 -
onerror对跨域 iframe 无效（浏览器限制），此时需配合服务端返回状态或预检接口
跨域 iframe 无法触发 onerror，需服务端兜底
当 iframe 指向不同源（如 https://other.com/app）时，浏览器会屏蔽 onerror 事件，且控制台不报错。此时你看到的“空白弹窗”实际是静默失败。解决路径只有两条：
- 服务端对目标页面做健康检查：在打开弹窗前，先
fetch('/api/iframe-check?url=...')，返回 HTTP 状态码或自定义 success 字段 - 让目标页面主动通知父页：在 iframe 内加
window.parent.postMessage({ type: 'ready' }, '*')，父页用window.addEventListener('message', ...)监听；超时未收到则视为失败 - 注意：
postMessage方案要求你能控制 iframe 内页面代码，否则不可行
layer v2.8+ 的 content 为对象时需额外处理
若使用新写法：content: { url: '/page.html', type: 'iframe' }，layer 内部创建 iframe 的时机略有不同，success 中的 layero.find('iframe') 可能为空。此时应改用 layer.getChildFrame() + 定时轮询：
const index = layer.open({
type: 2,
content: { url: '/page.html', type: 'iframe' },
success: function(layero) {
let loaded = false;
const check = () => {
const iframe = layer.getChildFrame('html', index);
if (iframe.length && !loaded) {
loaded = true;
const dom = $('#layui-layer-iframe' + index).find('iframe')[0];
dom.onerror = () => { /* 同上 */ };
} else if (!loaded && $('#layui-layer-iframe' + index).length) {
setTimeout(check, 50);
}
};
check();
}
});
真正难的不是写几行监听代码，而是得想清楚：这个 iframe 是谁维护的？能不能改它的内容？有没有权限配 CORS？这些决定了你该选前端监听、服务端预检，还是父子通信方案。
