检测哪个 iframe 发送了 post 消息

Question

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

我看到了source消息的属性，event但我无法通过使用它来响应event.source.contentWindow.postMessage：

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

Answer 1

您可以检测没有名称的 IFrame，只需使用 compare 即可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);

<p id="text"></p>

Answer 2

只需使用event.source.postMessage