在同一浏览器内的应用程序之间发送消息 window

Question

我有两个独立的网络应用程序，一个 angular 父应用程序和一个 React 子应用程序。父应用程序正在 iframe 中加载子应用程序。我正在尝试让这些应用程序使用 window.postMessage() 相互通信，但要么消息没有正确发送，要么没有被接收。

这正是我试过的。

父应用程序：

window.postMessage(message, "*")

子应用程序：

window.addEventListener("message", (event) => {
     console.log(event)
}

我唯一要做的就是当我在父级控制台上记录 window 时，我看到：

postMessage: f postMessage: ()
   length: 1
   name: "postMessage"
   arguments: [Exception: TypeError: 'caller', 'callee', and 'arguments' properties may not 
               be accessed on strict mode functions or the arguments objects for calls to       
               them at Function.s (<anonymous>:1:83)]
   caller: [Exception: TypeError: 'caller', 'callee', and 'arguments' properties may not 
               be accessed on strict mode functions or the arguments objects for calls to       
               them at Function.s (<anonymous>:1:83)]

Answer 1

父级必须从目标的 window（子进程，在您的情况下为 iframe）发送消息，而不是从父级的 window 对象：

const child = document.querySelector('iframe').contentWindow;
child.postMessage(message, "*")

在同一浏览器内的应用程序之间发送消息 window

Send messages between apps within same browser window

javascript

dom

typescript