有没有办法在同一个 iframe 上向 postMessage 添加多条消息？答案

【问题标题】：Is there a way to add multiple messages to postMessage on the same iframe?有没有办法在同一个 iframe 上向 postMessage 添加多条消息？
【发布时间】：2021-07-30 18:59:11
【问题描述】：

我有一个 iframe，它是一个表单。 iframe 需要从父窗口中抓取一些 url 参数并将它们添加到一些隐藏字段中。

目前在源域上我有这个：

var iframe = $('iframe[src^="DOMAIN"]'),
src = iframe.attr('src'),
data = window.location.search,
destination = iframe.get(0).contentWindow;

destination.postMessage(data, src);

在 iframe/其他域上我有这个，还有一个用于填写表单输入的函数：

var eventMethod = window.addEventListener ?
    "addEventListener" :
    "attachEvent";
  var eventer = window[eventMethod];
  var messageEvent = eventMethod === "attachEvent" ?
    "onmessage" :
    "message";
  eventer(messageEvent, function(e) {
    $('#output').text(e.data);
  });

问题是网站上正在使用的其他东西（iframe 调整大小）在同一个 iframe 上使用相同的 contentWindow。

我认为数据正在被覆盖，因为 e.data 显示 [iFrameSizer]iFrameResizer0:8:false:false:... 而我期望 ?utm_campain=test.. .

有没有办法使用相同或不同的对象属性来发送/接收消息？

【问题讨论】：

标签： javascript jquery iframe cross-domain

【解决方案1】：

您可以发送一个对象并检查该对象的属性以了解您要使用的消息：

您可能还想检查源是父窗口

类似：

var iframe = $('iframe[src^="DOMAIN"]'),
src = iframe.attr('src'),
data = {searchParams: window.location.search},
destination = iframe.get(0).contentWindow;

destination.postMessage(data, src);

帧内：

eventer(messageEvent, function(e) {
    if(e.source !== window.parent){
      console.log('Messaage not from parent');
      return;
    }

   if(typeof e.data === 'object' && e.data.hasOwnProperty('searchParams') ){
       $('#output').text(e.data.searchParams);
   }
});

【讨论】：