The postMessage API in JavaScript is a powerful tool for securely enabling cross-origin communication between different windows or iframes. It’s commonly used to exchange data between a parent component and an embedded iframe, allowing for controlled interaction even if the documents originate from different sources.
Here’s a practical example of using postMessage to send data between an iframe and a parent component:
// Parent Component const iframe = document.getElementById("myIframe"); // Send a message to the iframe iframe.contentWindow.postMessage("Hello from parent", "https://iframe-domain.here"); // Listen the message window.addEventListener("message", (event) => { if (event.origin === "https://iframe-domain.here") { console.log("Message from iframe:", event.data); } }, false); // Iframe Component // Send a message to the parent window.parent.postMessage("Hello from iframe", "https://parent-domain.here"); 
Top comments (0)