leticiafernandes/poc-post-message

Trying out the postMessage native API to communicate between iframes.

POC - Cross Document Communication

The goal of this repository is to try-out the postMessage API to communicate between parent-child iframes.

Brief explanation

• index.html - The "parent" ifame;
• child.html - The "child" ifame.

Running locally

$ npm i

$ npm start

Funcionality

The MESSAGE TO CHILD call to action implementation benefits from the contentWindow.postMessage method to send the message to the child iframe.

The MESSAGE TO PARENT call to action implementation benefits from the window.top.postMessage method to send the message to the parent iframe.

Attention points

• If the iframes are hosted in different domains, it's necessary to include CORs configurations to the domain (more info here).

• Map the target origins that will be used as the postMessage method second parameter (more info here).

• Useful links:

  • Web messaging