跨 iframe 通信通常使用 postMessage 方法，这是一种安全且标准化的方式在不同源（origin）的文档之间传递消息。
父传子
父页面可以通过 contentWindow.postMessage() 方法向子页面发送消息。
- 父页面发送消息：
使用 postMessage 方法将消息发送到指定的窗口（iframe）。
// 父页面发送消息到 iframe
var iframe = document.getElementById('Iframe');
iframe.contentWindow.postMessage('发送给iframe页面内的消息', '*');
- Iframe内接收消息：
在接收消息的一方，使用 message 事件监听并处理消息。
// 在 iframe 中接收消息
window.addEventListener('message', function(event) {// 一定要检查消息来源，确保安全if (event.origin !== 'http://allow-origin.com') return;console.log('Received message:', event.data);
});
子传父
子页面可以通过 parent.postMessage() 方法向父页面发送消息。
在一个嵌套的页面中，window 对象表示当前页面，而 window.parent 则表示包含当前页面 （iframe）的父页面。通过 window.parent，iframe 可以访问父页面的属性、方法和对象，并且可以在子页面中向父页面发送消息、调用父页面的函数等。
iframe内发送消息：
const obj = {type: "isShowIcon",msg: {data: false,},};window.parent.postMessage(JSON.stringify(obj), "*");
父页面接收消息：
// 在 父页面 中接收消息
window.addEventListener("message",(e) => {let data = JSON.parse(e.data);if (data.type == "isShowIcon") {console.log(data.msg.data);}},
);
安全性
为了确保通信的安全性，应当在接收消息时验证消息的来源（origin），使用通配符 * 时应谨慎，最好限制来源的范围。
// 安全的接收消息示例
window.addEventListener('message', function(event) {if (event.origin === 'http://allow-origin.com') {// 处理来自可信源的消息console.log('可信来源数据:', event.data);} else {console.warn('不确定来源:', event.origin);}
});
定义类型，来区别在 iframe 中那些不同的操作内容类型：
发送
// var message = {
// customType: '你自定义的消息类型/来源',
// customValue: '你自定义的消息'
// };function addNums(a, b){return a + b;
}var message = {operateType: 'clickBtn',sendValue: '点击了一下，怎么了',sendFunc: addNums
};
// window.location.origin iframe的url源
window.parent.postMessage(message, window.location.origin);
监听接收消息
window.addEventListener('message', function(event) {if (event.origin === 'http://origin.com' && event.data?.operateType === 'clickBtn') {// 处理来自可信源和特定的类型的消息console.log('可信来源数据:', event.data.sendValue); // 点击了一下，怎么了event.data.sendFunc(520, 1); // 521} else {console.warn('不确定来源:', event.origin);}
});
