iframe 父子组件通信详解

父组件向子组件（iframe）发送消息

父组件代码

// 创建自定义事件
const event = new CustomEvent('sendToIframe', { detail: 'Hello from parent' });

// 获取 iframe 的 window 对象
const iframeWindow = document.getElementById('iframe的ID').contentWindow;

// 向 iframe 发送消息
iframeWindow.dispatchEvent(event);

iframe 内部代码

// 监听来自父组件的消息
window.addEventListener('sendToIframe', (e) => {
  console.log('收到来自父组件的参数', e.detail);
});

子组件（iframe）向父组件发送消息

父组件代码

// 监听来自 iframe 的消息
window.addEventListener('sendToParent', (e) => {
  console.log('收到来自 iframe 的参数', e.detail);
});

iframe 内部代码

// 创建自定义事件
const event = new CustomEvent('sendToParent', { detail: 'Hello from iframe' });

// 向父组件发送消息
window.parent.dispatchEvent(event);

注意事项

1. 安全限制：如果 iframe 内容与父页面不在同一个域下，通信可能会受到浏览器同源策略的限制
2. 元素选择器：在获取 iframe 元素时，ID 前不需要添加 # 符号，直接使用 getElementById('iframe的ID') 即可
3. 事件监听：确保在接收端正确监听对应的事件类型
4. 数据传递：通过 detail 属性传递数据，接收时也应从 e.detail 中获取

替代方案

除了使用 CustomEvent，还可以使用 window.postMessage 方法实现跨域通信，这是更常用和安全的 iframe 通信方式。