在跨 iframe 通信中，直接使用 window.dispatchevent() 无法将事件冒泡至父窗口；必须显式调用 window.parent.dispatchevent() 才能将自定义事件正确发送给主应用。
在跨 iframe 通信中，直接使用 window.dispatchevent() 无法将事件冒泡至父窗口；必须显式调用 window.parent.dispatchevent() 才能将自定义事件正确发送给主应用。
当 iframe 与主应用同源（same-origin）时，可通过 window.parent 安全地向父级上下文分发自定义事件。这是最轻量、无需额外库的原生通信方式。
✅ 正确做法：iframe 内通过 window.parent.dispatchEvent() 主动推送事件
// iframe 中的代码（同源前提下）
window.parent.dispatchEvent(
new CustomEvent("play-key", {
detail: "C4",
bubbles: false,
cancelable: false
})
);✅ 主应用监听（注册在 window 上即可）
// 主应用中（如 React/Vue 组件的 useEffect 或 mounted 钩子内）
window.addEventListener("play-key", (e: CustomEvent<string>) => {
this.setSelectedKey(e.detail); // e.detail 即传递的数据
});⚠️ 注意事项：
- 同源限制：仅当 iframe 与主页面同协议、同域名、同端口时，window.parent 才可访问且事件可传递；跨域场景需改用 postMessage()。
-
避免内存泄漏：主应用应在组件卸载或销毁时移除监听器：
const handler = (e: CustomEvent) => this.setSelectedKey(e.detail); window.addEventListener("play-key", handler); // 清理时 window.removeEventListener("play-key", handler); - 事件命名建议：使用带作用域的名称（如 "myapp:play-key"）避免与其他库冲突。
? 补充：若需跨域通信，请改用 window.parent.postMessage(data, targetOrigin) 并在主应用中监听 message 事件——但本方案不适用于当前同源场景，且复杂度更高。优先采用 parent.dispatchEvent() 实现简洁可靠的 iframe → 父通信。
