如何通过postMessage获取发送消息的iFrame元素？

给你几个实用的解决思路：

• 给每个iFrame绑定唯一标识，发消息时主动携带
  在iFrame内部发送postMessage的时候，带上自己的专属标识（比如id、自定义属性值），主窗口接收消息时直接用这个标识匹配对应的iFrame元素。
  示例代码：
  iFrame内部代码：

  // 假设当前iFrame有id="user-info-frame"，或者可以通过frameElement获取标识
  const senderId = window.frameElement.id;
  window.parent.postMessage({
    type: 'form-submit',
    data: { username: 'xxx' },
    senderId: senderId
  }, '*'); // 建议替换成具体的目标域，提升安全性
  

  主窗口接收代码：

  window.addEventListener('message', (event) => {
    const { senderId } = event.data;
    if (senderId) {
      const targetIframe = document.getElementById(senderId);
      // 拿到目标iFrame，做后续处理
    }
  });
  

  如果是动态生成的iFrame，创建时给它加个唯一的data-frame-id属性，iFrame内部通过window.frameElement.dataset.frameId就能拿到这个标识，沙箱环境只要没限制frameElement就能用，大部分场景都支持。

• 预存contentWindow与iFrame元素的映射关系
  主窗口在创建iFrame的时候，把每个iFrame的contentWindow和对应的DOM元素存在一个Map里，接收消息时用event.source直接从Map里取对应的iFrame。
  示例代码：

  const iframeMap = new Map();
  
  // 动态创建iFrame时
  function createIframe(src) {
    const iframe = document.createElement('iframe');
    iframe.src = src;
    iframe.onload = () => {
      // 加载完成后存入映射
      iframeMap.set(iframe.contentWindow, iframe);
    };
    document.body.appendChild(iframe);
  }
  
  // 接收消息时匹配
  window.addEventListener('message', (event) => {
    const targetIframe = iframeMap.get(event.source);
    if (targetIframe) {
      // 找到目标iFrame，执行逻辑
    }
  });
  

  沙箱环境只要允许主窗口获取iFrame的contentWindow引用，这个方法就能生效，哪怕没法读取内部属性，映射关系依然成立。

• 结合origin筛选+标识定位（提升安全性）
  如果不同iFrame的来源域名不同，可以先通过event.origin过滤掉非信任来源的消息，再结合前面的标识精准定位。比如：

  window.addEventListener('message', (event) => {
    // 先验证来源，避免恶意消息
    if (event.origin !== 'https://your-trusted-domain.com') return;
    
    const { senderId } = event.data;
    const targetIframe = document.querySelector(`iframe[data-frame-id="${senderId}"]`);
    if (targetIframe) {
      // 处理逻辑
    }
  });
  

内容的提问来源于stack exchange，提问作者codingmaster398