window.onerror在iframe中收不到子页js异常，因为浏览器规范限制子页错误属于独立浏览上下文，父页无法越界捕获；跨域时contentwindow为null，同源时需在子页注入监听脚本并通过postmessage上报。
为什么 window.onerror 在 iframe 里收不到子页 JS 异常
子页面 JS 抛错时，父页的 window.onerror 完全不会触发——这不是监听没写对，而是浏览器规范明确限制：iframe 内部的错误属于独立浏览上下文，除非你显式在子页自己的全局环境里注册监听，否则父页无权“越界”捕获。更麻烦的是，如果子页跨域，连 iframe.contentWindow 都是 null，根本没法绑定任何 handler。
常见错误现象包括：
- 子页控制台报
ReferenceError: foo is not defined，但父页window.onerror一动不动 - 用
postMessage想传错误信息，结果子页压根没发（因为没人 catch、没人主动上报） - 父页尝试
iframe.contentWindow.addEventListener('error', ...)，直接抛SecurityError
同源 iframe：直接在子页注入错误监听脚本 只要子页和父页同源（协议+域名+端口全等），你就能在子页 DOM 就绪后，动态注入一段错误捕获逻辑。关键不是“父页监听”，而是“父页帮子页装好监听”。
操作要点：
- 必须等子页
load事件触发后再操作，否则contentDocument可能为空 - 注入的脚本要挂载到子页的
window上，不是父页的 - 错误需带上下文字段，不能只传
e.message
const iframe = document.getElementById('preview');
iframe.addEventListener('load', () => {
const doc = iframe.contentDocument;
const win = iframe.contentWindow;
if (!doc || !win) return;
<p>const script = doc.createElement('script');
script.textContent = <code> window.addEventListener('error', (e) => { window.parent.postMessage({ type: 'js-error', message: e.message, filename: e.filename, lineno: e.lineno, colno: e.colno, stack: e.error?.stack || '' }, '*'); }); window.addEventListener('unhandledrejection', (e) => { window.parent.postMessage({ type: 'unhandled-rejection', reason: e.reason?.toString(), stack: e.reason?.stack || '' }, '*'); }); </code>;
doc.head.appendChild(script);
});</p>
跨域 iframe：唯一可行路径是子页主动配合
跨域时，父页对子页 JS 环境完全不可见。你无法注入脚本、无法读 DOM、无法绑事件——iframe.contentWindow 是只读 null，任何访问都抛 SecurityError。
这时必须依赖子页自己实现错误上报，并通过 postMessage 主动推给父页：
- 子页需提前部署
window.addEventListener('error')和unhandledrejection - 所有
postMessage必须校验event.origin，防止伪造消息 - 父页只能被动收，不能强制要求子页执行任意逻辑
// 父页监听
window.addEventListener('message', (e) => {
if (e.source !== iframe.contentWindow) return;
if (e.origin !== 'https://trusted-child.com') return; // 必须白名单校验
<p>if (e.data.type === 'js-error') {
reportError(e.data);
}
});</p>
动态生成子页内容时，别用 innerHTML 插入 script
很多 HTML 编辑器预览功能会拼接字符串然后赋值给 iframe.contentDocument.body.innerHTML，这会导致两个问题：
- 插入的 <script></script> 标签**不会执行**（浏览器安全策略）
- 即使执行了，其错误也属于“间接执行”，window.onerror 不触发
正确做法是用 createElement('script') + textContent 同步注入：
const doc = iframe.contentDocument;
const script = doc.createElement('script');
script.textContent = userJsCode; // 不是 innerHTML 拼接
doc.head.appendChild(script); // 确保在 head，避免执行时机问题
注意：若子页启用了 sandbox，必须包含 allow-scripts，否则 script 直接被禁用；但切勿加 allow-top-navigation，否则可能被恶意跳转劫持。
真正难的不是怎么捕获，而是你怎么确保子页代码执行环境可控——尤其是第三方或用户输入的内容，永远别假设它会乖乖上报错误。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
