Iframe Parent Container communication

If you have an iframe embedded in a webpage, you may want to send messages between the iframe and its parent container to exchange information or trigger actions. JavaScript provides the postMessage() method to send messages between different windows or frames, and you can use it to communicate between an iframe and its parent container. In this article, we’ll go over a simple example of how to send messages between an iframe and its parent container using JavaScript.

Sending Messages from the Parent Container to the Iframe

To send a message from the parent container to the iframe, you can use the postMessage() method with reference to the iframe’s window object. Here’s an example of how you can do that:

// Get a reference to the iframe element
const iframe = document.getElementById('my-iframe');

// Send a message to the iframe
function sendMessageToIframe(message) {
    // Get a reference to the window object of the iframe
    const iframeWindow = iframe.contentWindow;

    // Call a function defined in the iframe with the message to be sent
    iframeWindow.postMessage(message, '*');
}

In this example, we first get a reference to the iframe element using its ID. Then, we define a sendMessageToIframe() function that takes a message as its argument. Inside the function, we use the contentWindow property of the iframe to get a reference to its window object, and then call the postMessage() method with the message to be sent and a target origin of '*' to allow sending the message to any origin. To receive the message in the iframe, we need to define an event listener to listen for messages sent from the parent container:

// Add an event listener to listen for messages sent from the parent window
window.addEventListener('message', receiveMessage, false);

function receiveMessage(event) {
    // Do something with the message received from the parent window
    console.log('Message received from parent container:', event.data);
}

When a message is received, the receiveMessage() function is called with an event object that contains the message data in its data property. Here, we add an event listener to the window object of the iframe to listen for messages sent from the parent window. In this example, we simply log the message to the console, but you can do whatever you want with it. To send a message from the parent container to the iframe, you can call the sendMessageToIframe() function with the message you want to send as its argument:

sendMessageToIframe('Hello from the parent container!');

Sending Messages from the Iframe to the Parent Container

To send a message from the iframe to the parent container, you can use the postMessage() method with reference to the parent window object. Here’s an example of how you can do that:

// Send a message to the parent window
function sendMessageToParent(message) {
    // Call the postMessage method on the parent window with the message to be sent and the target origin
    window.parent.postMessage(message, '*');
}

In this example, we define a sendMessageToParent() function that takes a message as its argument. Inside the function, we use the postMessage() method with the message to be sent and a target origin of '*' to allow sending the message to any origin. To receive the message in the parent container, we need to add an event listener to the window object of the parent container:

// Add an event listener
window.addEventListener('message', receiveMessage, false);

function receiveMessage(event) { // Do something with the message received from the iframe console.log('Message received from iframe:', event.data); }

Here, we add an event listener to the window object of the parent container to listen for messages sent from the iframe. When a message is received, the receiveMessage() function is called with an event object that contains the message data in its data property. In this example, we simply log the message to the console, but you can do whatever you want with it.

To send a message from the iframe to the parent container, you can call the sendMessageToParent() function with the message you want to send as its argument:

sendMessageToParent('Hello from the iframe!');

Conclusion

Sending messages between an iframe and its parent container can be helpful when you want to exchange information or trigger actions between them. JavaScript’s postMessage() method provides a simple way to send messages between different windows or frames, and you can use it to communicate between an iframe and its parent container. In this article, we’ve gone over a simple example of how to send messages between an iframe and its parent container using JavaScript. With this knowledge, you can implement more complex communication scenarios between iframes and their parent containers in your web applications.