检测哪个 iframe 发送了 post 消息答案

【问题标题】：detect which iframe sent post message检测哪个 iframe 发送了 post 消息
【发布时间】：2013-10-08 16:23:14
【问题描述】：

假设我在页面上有多个 iframe，其中一个发送了帖子消息。有没有一种简单且跨浏览器的方法来检测是哪一个做的并能够回复？

我看到消息event 的source 属性，但我无法响应在其上使用event.source.contentWindow.postMessage：

错误：访问属性“contentWindow”的权限被拒绝

【问题讨论】：

如果有人会为同样的问题寻找解决方案，我可以分享我的发现。只需将 iframe ID 与其他数据一起发送到消息中即可。在此 iframe 中读取 iframe 的 ID 的简单方法设置为与“name”属性类似，并在工作期间获取 window.name 属性。

标签： javascript cross-domain postmessage

【解决方案1】：

你可以检测没有名字的IFrame，只需使用比较iframe.contentWindow === event.source。

window.addEventListener('message', function (event) {
  var iframes = document.getElementsByTagName('IFRAME');

  for (var i = 0, iframe, win; i < iframes.length; i++) {
    iframe = iframes[i];

    // Cross-browser way to get iframe's window object
    win = iframe.contentWindow || iframe.contentDocument.defaultView;

    // Comparison
    text.innerText += iframe.src +
      (win === event.source ? ' MATCHES.\n' : ' is not our IFrame.\n');
  }
});

// Creates iframe and sends postMessage from it
function createIFrameWithMessage(id) {
  var iframe = document.createElement('IFRAME');
  iframe.src = 'javascript:parent.postMessage("IFrame #' + id + '", "*");';
  document.body.appendChild(iframe);
}

createIFrameWithMessage(1);
createIFrameWithMessage(2);
createIFrameWithMessage(3);

&lt;p id="text"&gt;&lt;/p&gt;

【讨论】：

【解决方案2】：

iframe

<script>
    document.addEventListener('mousedown',event =>
        parent.postMessage({ name: window.name }, window.location.origin)
    );
</script>

父窗口

<script>
   window.addEventListener("message", event => {
       if (event.origin != window.location.origin) return;
       console.warn(event.source.frameElement.name);
       // here you can find your iframe by name
   });
</script>
<iframe name='myname1' src='/url1'/>
<iframe name='myname2' src='/url2'/>
<iframe name='myname3' src='/url3'/>

【讨论】：

【解决方案3】：

只需使用 event.source.postMessage

【讨论】：