Layui中如何监听layer弹窗内iframe加载失败的状态

iframe加载失败时layer弹窗不会自动捕获错误，需在success回调中手动绑定onerror；跨域时onerror失效，须用服务端预检或postMessage方案；v2.8+ content为对象时需轮询获取iframe节点。

iframe加载失败时layer弹窗本身不会自动捕获错误

Layer 的 layer.open() 创建 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？这些决定了你该选前端监听、服务端预检，还是父子通信方案。