postMessage：iframe（子页面） 与 父页面 通信

跨 iframe 通信通常使用 postMessage 方法，这是一种安全且标准化的方式在不同源（origin）的文档之间传递消息。

父传子
父页面可以通过 contentWindow.postMessage() 方法向子页面发送消息。

1. 父页面发送消息：
   使用 postMessage 方法将消息发送到指定的窗口（iframe）。

// 父页面发送消息到 iframe
var iframe = document.getElementById('Iframe');
iframe.contentWindow.postMessage('发送给iframe页面内的消息', '*');

2. 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);
  }
});