回答

将 iframe 中的 JavaScript 错误发送到父窗口处理，主要取决于 iframe 和父窗口是否属于同源（Same-Origin）。

通常推荐使用 postMessage 机制，因为它既适用于同源也适用于跨域，且耦合度最低。

以下是具体的实现方案：

方案一：使用 postMessage (通用、推荐)

无论 iframe 是同源还是跨域，这都是最标准的做法。

1. Iframe 代码 (发送方)

在 iframe 页面中监听全局错误，并将错误信息封装成普通对象（JSON）发送给父窗口。

// iframe-script.js

// 1. 监听常规 JS 错误
window.onerror = function(message, source, lineno, colno, error) {
    sendErrorToParent({
        type: 'js_error',
        message: message,
        source: source,
        lineno: lineno,
        colno: colno,
        stack: error ? error.stack : ''
    });
    // 返回 true 可以阻止默认的浏览器错误在控制台打印（可选）
    // return true; 
};

// 2. 监听未捕获的 Promise 错误 (Async/Await 错误)
window.addEventListener('unhandledrejection', function(event) {
    sendErrorToParent({
        type: 'promise_error',
        message: event.reason ? (event.reason.message || event.reason) : 'Unknown Promise Error',
        stack: event.reason ? event.reason.stack : ''
    });
});

// 封装发送逻辑
function sendErrorToParent(errorData) {
    if (window.parent && window.parent !== window) {
        // 注意：Error 对象不能直接通过 postMessage 发送，必须转为普通对象
        // '*' 表示发送给任意源，生产环境建议指定具体的父窗口 Origin，如 'https://parent.com'
        window.parent.postMessage(JSON.stringify(errorData), '*');
    }
}

2. 父窗口代码 (接收方)

在父窗口监听 message 事件。

// parent-script.js

window.addEventListener('message', function(event) {
    // 1. 安全检查：建议校验 event.origin
    // if (event.origin !== "https://your-iframe-domain.com") return;

    try {
        // 2. 解析数据
        const data = JSON.parse(event.data);

        // 3. 过滤消息类型，只处理错误消息
        if (data.type === 'js_error' || data.type === 'promise_error') {
            console.log('【收到 iframe 错误】:', data);

            // 在这里调用你的上报接口，例如 Sentry 或自研监控
            // reportToServer(data);
        }
    } catch (e) {
        // 忽略无法解析的消息（可能是其他库发出的 postMessage）
    }
});

方案二：直接调用父窗口方法 (仅限同源)

如果你的 iframe 和父窗口完全同源（协议、域名、端口一致），你可以直接访问 window.parent 的全局对象。

1. 父窗口代码

定义一个全局接收函数。

// parent.html
window.handleIframeError = function(errorInfo) {
    console.error('来自 iframe 的错误:', errorInfo);
    // 上报逻辑...
};

2. Iframe 代码

直接调用该函数。

// iframe.html
window.onerror = function(message, source, lineno, colno, error) {
    if (window.parent && window.parent.handleIframeError) {
        window.parent.handleIframeError({
            message, source, lineno, colno, stack: error?.stack
        });
    }
};

重要注意事项

1. "Script error." 问题 (跨域脚本)

如果 iframe 内引用的 JS 文件是跨域的（例如放在 CDN 上），一旦报错，浏览器出于安全考虑，只会捕获到 Script error.，而没有详细堆栈信息。

解决方法：

在 <script> 标签上添加 crossorigin="anonymous"。

确保 CDN 服务器响应头包含 Access-Control-Allow-Origin: *。

<script src="https://cdn.example.com/app.js" crossorigin="anonymous"></script>

2. 序列化问题

postMessage 使用结构化克隆算法（Structured Clone Algorithm）。原生的 Error 对象在某些旧版本浏览器或特定环境下可能无法被完整克隆或传输，导致父窗口收到空对象。最佳实践： 如方案一所示，手动解构 Error 对象，将其属性（message, stack 等）提取到一个纯 JSON 对象中再发送。

3. 区分消息来源

父窗口可能会收到来自多个 iframe 或浏览器插件的 postMessage。务必在父窗口通过 event.origin 检查来源，或者在消息体中加一个特定的标识字段（如 namespace: 'my-error-monitor'）来区分是否是你的业务错误。