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 可以访问父页面的属性、方法和对象，并且可以在子页面中向父页面发送消息、调用父页面的函数等。

1. iframe内发送消息：

   使用 postMessage 方法将消息发送到指定的窗口（父窗口）。

   // iframe发送消息到 父页面
   window.parent.postMessage('发送给父页面的消息', '*');

2. 父页面接收消息：

   在接收消息的一方，使用 message 事件监听并处理消息。

   // 在 父页面 中接收消息
   window.addEventListener('message', function(event) {
     // 一定要检查消息来源，确保安全，出事了咱可不管埋
     if (event.origin !== 'http://allow-origin.com') return;
     
     console.log('Received message:', event.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);
  }
});