I need my parent page to communicate an instruction to the child iframe. I found out that due to cross-origin issues, I must use iframe.contentWindow.postMessage().

I'm calling the iFrame from within the parent using:

Parent.js

const iFrame = myComponent.current.componentDomElement.childNodes[0]
const result = iFrame.contentWindow.postMessage('test', '*')

In the child, I then want to handle it via: myComponent.js

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

I can see event being logged many times when the page loads, but not once after I manually trigger it with this Parent.js function.

Why is it not being triggered?

Edit:

I can see someone casted a vote to close this question due to lack of clarity. Can you explain what you're missing? I've provided all the details I assumed would be relevant, but if there's anything I'm missing I'm happy to add it.