同域多iframe场景下，如何通过message事件获取源iframe元素？（跨域限制）

这问题我之前也碰到过，当时卡了好一会儿——毕竟不能直接通过event.source关联到对应的iframe元素确实有点棘手。不过其实可以通过给每个iframe分配唯一标识+消息携带标识的方法解决，思路简单可靠，完全绕开无法访问contentWindow的限制。

具体步骤： #

1. 给每个iframe添加唯一标识

不管是静态写在HTML里还是动态创建的iframe，都给它加一个唯一的自定义属性（比如data-iframe-id）：

<!-- 静态iframe示例 -->
<iframe src="/path1" data-iframe-id="iframe-path-1"></iframe>
<iframe src="/path2" data-iframe-id="iframe-path-2"></iframe>

如果是动态创建iframe，记得在创建时生成唯一ID并赋值：

// 动态创建iframe的工具函数
function createUniqueIframe(src) {
  const iframe = document.createElement('iframe');
  // 生成唯一ID（时间戳+随机字符串组合，重复概率极低）
  const uniqueId = `iframe-${Date.now()}-${Math.random().toString(36).slice(2)}`;
  iframe.dataset.iframeId = uniqueId;
  iframe.src = src;
  document.body.appendChild(iframe);
  return { iframe, uniqueId };
}

2. 让iframe发送消息时携带自身标识

在每个iframe内部，发送postMessage的时候，把自己的标识作为消息数据的一部分传出去。注意要限制消息的目标源（targetOrigin），避免消息泄露：

// iframe内部的代码
const myId = window.frameElement.dataset.iframeId;
window.parent.postMessage(
  {
    type: 'your-message-type', // 可选：区分不同类型的消息
    payload: '需要传递的数据',
    senderId: myId // 关键：携带自身标识
  },
  window.location.origin // 只允许同源的父窗口接收，提升安全性
);

3. 父窗口建立标识与iframe的映射

在父窗口初始化时，把所有iframe的标识和对应的元素存储到一个Map里，方便后续快速查找：

const iframeMap = new Map();

// 初始化静态iframe的映射
document.querySelectorAll('iframe[data-iframe-id]').forEach(iframe => {
  iframeMap.set(iframe.dataset.iframeId, iframe);
});

// 如果是动态创建iframe，创建后直接加入映射
const { iframe, uniqueId } = createUniqueIframe('/dynamic-path');
iframeMap.set(uniqueId, iframe);

4. 监听消息并匹配对应的iframe

在父窗口的message事件监听里，取出消息中的senderId，再通过Map找到对应的iframe元素：

window.addEventListener('message', function(event) {
  // 第一步：验证消息来源合法性！一定要做，防止恶意跨域消息
  if (event.origin !== window.location.origin) return;

  // 第二步：取出消息中的标识
  const { senderId } = event.data;
  if (!senderId) return;

  // 第三步：通过映射找到对应的iframe
  const sourceIframe = iframeMap.get(senderId);
  if (sourceIframe) {
    // 这里就拿到了触发消息的源iframe，做你需要的操作
    console.log('收到来自以下iframe的消息:', sourceIframe);
    // 比如修改iframe样式、传递响应消息等
    sourceIframe.style.border = '2px solid green';
  }
});

额外注意事项： #

• 安全第一：永远不要省略event.origin的验证，即使你认为所有iframe都是同源的，这能有效防止恶意网站通过伪造postMessage攻击你的页面。
• 标识唯一性：确保每个iframe的标识不会重复，使用时间戳+随机字符串的组合是很稳妥的方式。
• 动态iframe的清理：如果需要移除某个iframe，记得同时从iframeMap中删除对应的条目，避免内存泄漏。

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