Damián Pumar

← Back to blog

Published on January 3, 2024 by Damián Pumar

Hi 👋

In this post I will explain how can you send data from <iframe> to its parent window without any cors restriction and sending complex objects.

Imagine that you have a website that has an <iframe> that loads a third party website, and you need to send data from the <iframe> to the parent window.

Let’s start with child <iframe> code

// child.html
  <button onclick="sendDataToParent()">Send data to parent</button>

  function sendDataToParent() {
    const message = {
      event: "your_event_id",
      data: {
        name: "Damián",
        lastName: "Pumar",
        age: 32,

    window.parent.postMessage(JSON.stringify(message), "*");

With postMessage we can send data from the <iframe> to the parent window, but we have some restrictions:

The postMessage method receives two parameters:

So, we have a button that when we click on it, we send a message to the parent window using the postMessage method.

Now let’s see the parent window code

// parent.html
<iframe src="child.html"></iframe>

  window.addEventListener("message", (event) => {
    const data = JSON.parse(event.data);
    // {
    //   event: "your_event_id",
    //   data:
    //     { name: "Damián",
    //       lastName: "Pumar",
    //       age: 32
    //     }
    // }

Easy right? 🤓

Hope you like it, see you in the next post 👋

Bye 🙌

Written by Damián Pumar

Something wrong? Let me know 🙏

← Back to blog