Child

by dshilkret

HTML

<div id="root"></div>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script>
  class App extends React.Component {
    componentDidMount() {
      // Listen for messages from the parent
      window.addEventListener("message", (event) => {
        if (event.data.action === "updateData") {
          alert(`Received from parent: ${event.data.payload}`);
        }
      });
    }

    sendMessageToParent = () => {
      // Send a message to the parent
      window.parent.postMessage({ action: "childMessage", payload: "Hello from React" }, "*");
    };

    render() {
      return (
        <div>
          <h1>React App in Iframe</h1>
          <button onClick={this.sendMessageToParent}>Send Message to Parent</button>
        </div>
      );
    }
  }

  ReactDOM.render(<App />, document.getElementById("root"));
</script>