在跨 iframe 通信中，直接使用 window.dispatchEvent() 无法将事件冒泡至父页面；必须显式调用 window.parent.dispatchEvent() 才能将自定义事件正确传递给主应用。

在跨 iframe 通信中，直接使用 `window.dispatchevent()` 无法将事件冒泡至父页面；必须显式调用 `window.parent.dispatchevent()` 才能将自定义事件正确传递给主应用。

在 Web 开发中，iframe 与主页面属于不同执行上下文（即使同源），其 window 对象相互隔离。因此，iframe 内部通过 window.dispatchEvent() 触发的事件仅作用于 iframe 自身的全局对象，不会自动穿透到父页面——这是初学者常遇到的核心误区。

✅ 正确做法是：iframe 中向 window.parent 派发事件，主页面在自身 window 上监听：

// ✅ iframe 内：向父窗口派发事件
window.parent.dispatchEvent(
  new CustomEvent("play-key", {
    detail: "C4",
    bubbles: false, // 默认 false，无需冒泡（parent 就是目标）
    cancelable: false
  })
);

// ✅ 主页面内：监听来自 iframe 的事件（无需特殊配置）
window.addEventListener("play-key", (e) => {
  console.log("Received key:", e.detail); // 输出: "C4"
  this.setSelectedKey(e.detail);
});

⚠️ 注意事项：

• 同源限制：window.parent 可访问的前提是 iframe 与主页面同源（协议、域名、端口均一致）。跨域时会触发 SecurityError，此时需改用 postMessage() 配合 message 事件实现安全通信。
• 事件命名建议：使用带前缀的自定义事件名（如 "myapp:play-key"）避免与原生事件或第三方库冲突。
• TypeScript 类型提示：可定义事件接口提升类型安全性：

  interface PlayKeyEvent extends CustomEvent {
    detail: string;
  }
  window.addEventListener("play-key", (e: PlayKeyEvent) => { /* ... */ });

? 总结：iframe → 父页面通信的本质是跨上下文显式委托，而非 DOM 事件冒泡。牢记 parent 是桥梁，dispatchEvent 必须作用于目标接收方的 window 对象——理解这一点，即可稳定实现轻量级、低耦合的父子通信。