跨 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 !== 'allow-origin.com') return;
console.log('Received message:', event.data); }); 子传父 子页面可以通过 parent.postMessage() 方法向父页面发送消息。
在一个嵌套的页面中，window 对象表示当前页面，而 window.parent 则表示包含当前页面 （iframe）的父页面。通过 window.parent，iframe 可以访问父页面的属性、方法和对象，并且可以在子页面中向父页面发送消息、调用父页面的函数等。
iframe内发送消息：
使用 postMessage 方法将消息发送到指定的窗口（父窗口）。
// iframe发送消息到 父页面 window.parent.postMessage('发送给父页面的消息', '*'); 父页面接收消息：
在接收消息的一方，使用 message 事件监听并处理消息。
// 在 父页面 中接收消息 window.addEventListener('message', function(event) { // 一定要检查消息来源，确保安全，出事了咱可不管埋 if (event.origin !== 'allow-origin.com') return;
console.log('Received message:', event.data); }); 安全性 为了确保通信的安全性，应当在接收消息时验证消息的来源（origin），使用通配符 * 时应谨慎，最好限制来源的范围。
// 安全的接收消息示例 window.addEventListener('message', function(event) { if (event.origin === '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 === 'origin.com' && event.data?.operateType === 'clickBtn') { // 处理来自可信源和特定的类型的消息 console.log('可信来源数据:', event.data.sendValue); // 点击了一下，怎么了 event.data.sendFunc(520, 1); // 521 } else { console.warn('不确定来源:', event.origin); } })
