Send messages between apps within same browser window-CodePudding

I have two separate web apps, an angular parent app and a react child app. The parent app is loading the child app in an iframe. I am trying to have these apps talk to each other using window.postMessage() but either the message isn't being properly sent or it isn't being received.

Here is exactly what I've tried.

Parent App:

window.postMessage(message, "*")

Child App:

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

The only thing I have to go off of is when I console log the window on the parent, I see:

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)]

CodePudding user response：

The parent must dispatch the message from the window of the target (child process, iframe in your case) not from the window object of the parent:

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