检测哪个 iframe 发送了开机自检消息

Question

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

我看到消息event的 source 属性，但我无法通过对其使用 event.source.contentWindow.postMessage 进行响应：

错误：访问属性"内容窗口"的权限被拒绝

Answer 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);

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

Answer 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'/>

Answer 3

只需使用event.source.postMessage

Answer 4

function getIFrameThatSentMessage(message) {
    let allIFrames = Array.from(document.querySelectorAll("iframe"));
    return allIFrames.find(
        iframe => iframe.contentWindow == message.source
    );
}
window.addEventListener("message", (event) => {
     console.log(getIFrameThatSentMessage(event);
});

这个问题已经得到了回答，但是对于其他任何寻找简洁方法来检测哪个IFrame发送消息的人，我想出了上面的功能。

传递给 getIFrameThatSentMessage 函数的"message"对象对应于侦听消息时将收到的事件。