发布消息 两个具有相同来源的子窗口

postmessage two child windows with same origin

本文关键字:窗口 两个 布消息 消息      更新时间:2023-09-26

我想知道如何在以下情况下在窗口之间实现 js 中的正确通信方式(最好使用 postMessage):

P A R E N T | |儿童1 儿童2

父级在原点

1 中,两个子项都在原点 2 中(实际上是同一网站在两种不同的模式下)。

如何向确切的孩子发送消息,避免第二个孩子做出反应。

提前致谢

假设您正在打开两个弹出窗口:

/*
 * In window A's scripts, with A being on <http://example.com:8080>:
 */
var popup1 = window.open(...popup details...),
    popup2 = window.open(...popup details...);
popup1.postMessage('some message to popup 1', 'http://example.org');
popup2.postMessage('some message to popup 2', 'http://example.org');

在弹出窗口中,您需要添加侦听器代码:

function receiveMessage(event)
{
  // Do we trust the sender of this message?  (might be
  // different from what we originally opened, for example).
  if (event.origin !== "http://example.org")
    return;
  // event.source is popup
  // event.data is "some message to popup 1"
}
window.addEventListener("message", receiveMessage, false);

这里的问题是两个弹出窗口都需要与父窗口属于同一域。