无法直接监听跨域 iframe 内部点击事件，因浏览器沙箱机制阻断事件冒泡；必须通过 postmessage 由子页主动上报，父页校验 origin 后响应。
父页面用 addEventListener 直接监听 iframe 内部点击，本质上走不通——这不是代码写得不对，而是浏览器从底层就禁止了这种跨域 DOM 事件穿透。iframe 的沙箱机制（哪怕没显式加 sandbox 属性，只要跨域，默认就处于隔离状态）会切断事件冒泡链，让 click、input 等原生事件止步于 iframe 边界。想“绕过”它去监听子页按钮点击，必须换思路，不硬碰硬。
别试图监听 iframe 元素本身或它的 contentDocument
这两条路在现代浏览器里基本失效：
- 给 iframe 标签加 click 监听器：只能捕获用户点击 iframe 框架边缘的空白区域，点里面的内容完全无响应；
-
访问 iframe.contentDocument 或 contentWindow：跨域时直接抛错
Blocked a frame with origin "https://a.com" from accessing a cross-origin frame，连对象都拿不到，更别说绑事件。
用 postMessage 做“事件代理”，由子页主动上报
这是目前最稳定、兼容性最好、也最符合安全规范的做法。核心逻辑是：子页面自己监听内部点击，再把动作“告诉”父页面，父页面只负责接收和响应。
- 子页面（如
https://b.com/widget.html）在 DOM 就绪后，对目标按钮绑定 click，并调用window.parent.postMessage({ type: 'BUTTON_CLICK', id: 'submit' }, 'https://a.com')； - 父页面在全局尽早注册 message 监听（推荐放在
里的同步 script 中），收到后解析event.data.type，再执行对应逻辑（比如关闭弹窗、刷新数据）； - 务必校验
event.origin，避免接收不可信来源的消息，例如：if (event.origin !== 'https://b.com') return;。
用 activeElement + 全局 click 配合判断焦点归属
如果只是需要“用户点了 iframe 区域”，不关心具体哪个按钮，可用这个轻量级兜底方案：
- 父页面监听全局
click事件； - 在回调里检查
document.activeElement是否为当前 iframe 元素，或其后代（需注意 iframe 自身可能不获得焦点，可配合tabindex="0"让它可聚焦）； - 再结合
event.target的ownerDocument.defaultView.frameElement判断是否来自 iframe 内部（部分场景下有效，但不如 postMessage 可靠）。
避免常见时序陷阱
即使选对了 postMessage 方案，消息仍可能“发出去却没人收”，主因是监听器没挂好就发消息：
- 父页面不要等
mounted或DOMContentLoaded才注册监听——子 iframe 可能加载更快； - 子页面不要在内联 script 第一行就发消息，应等
document.readyState === 'complete'或window.addEventListener('load', ...)后再触发； - 可在子页面首次加载完成时先发一条
READY消息，父页面收到后再发业务数据，形成握手确认。
