如何检测使用srcdoc属性加载iframe时的错误与警告？

要彻底捕获iframe内的所有错误（包括JS语法错误、运行时错误、未处理Promise拒绝）以及显式的console警告/错误，仅重定义console方法不够，还需要结合全局错误事件监听，以下是具体实现：

核心思路 #

1. 监听全局错误事件：捕获JS自身抛出的语法错误、运行时错误，以及未处理的Promise拒绝。
2. 拦截console方法并通信：将显式调用的console.warn/console.error等消息通过postMessage传递到父页面统一记录。

代码实现 #

父页面代码 #

<iframe id="targetIframe" srcdoc=""></iframe>
<script>
const iframe = document.getElementById('targetIframe');

// 等待iframe加载完成后绑定监听
iframe.addEventListener('load', () => {
  const iframeWin = iframe.contentWindow;

  // 捕获JS语法/运行时错误
  iframeWin.addEventListener('error', (e) => {
    console.log('[IFRAME 错误]', `消息：${e.message}，文件：${e.filename}，行：${e.lineno}，列：${e.colno}`);
    // 此处可将错误写入日志系统
  });

  // 捕获未处理的Promise拒绝
  iframeWin.addEventListener('unhandledrejection', (e) => {
    console.log('[IFRAME 未处理Promise]', `原因：${e.reason}`);
    // 记录拒绝信息
  });

  // 接收iframe传来的console消息
  window.addEventListener('message', (e) => {
    if (e.source === iframeWin && e.data.type === 'console') {
      console.log(`[IFRAME ${e.data.level.toUpperCase()}]`, ...e.data.args);
      // 统一记录console输出
    }
  });
});

// 注入srcdoc内容
iframe.srcdoc = `
<!DOCTYPE html>
<html>
<head>
  <style>
    /* 示例CSS错误（浏览器原生控制台可见，无法通过JS捕获） */
    body { invalid-css-prop: #fff; }
  </style>
</head>
<body>
  <script>
    // 拦截console方法，向父页面发送消息
    ['log', 'warn', 'error'].forEach(level => {
      const originConsole = console[level];
      console[level] = (...args) => {
        originConsole(...args); // 保留原控制台输出
        window.parent.postMessage({
          type: 'console',
          level: level,
          args: args
        }, '*');
      };
    });

    // 示例语法错误（会被全局error事件捕获）
    let testVar = ;

    // 示例显式错误（会被拦截的console.error捕获）
    console.error('这是显式调用的错误');

    // 示例未处理Promise拒绝（会被unhandledrejection事件捕获）
    Promise.reject('未捕获的Promise异常');
  </script>
</body>
</html>
`;
</script>

注意事项 #

• CSS错误限制：浏览器不会通过JS事件抛出CSS语法错误，这类错误只能在浏览器原生控制台查看，若需监控外部CSS加载失败，可监听<link>元素的error事件。
• 同源保障：使用srcdoc的iframe与父页面同源，因此无需处理跨域权限问题，postMessage和访问contentWindow均正常生效。
• 加载时机：必须在iframe的load事件触发后绑定监听，否则会错过iframe初始化阶段的早期错误。

内容的提问来源于stack exchange，提问作者Land