Parent

by dshilkret

HTML

<!DOCTYPE html>
<html ng-app="iframeApp">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
  <script>
    angular.module('iframeApp', [])
      .controller('MainCtrl', ['$scope', function ($scope) {
        $scope.message = "No message from Child yet!";

        $scope.sendMessageToChild = function () {
          const iframe = document.querySelector("iframe");
          iframe.contentWindow.postMessage(
            { action: "updateData", payload: "Hello from AngularJS Parent!" },
            "*"
          );
        };

        window.addEventListener("message", function (event) {
          if (event.data.action === "childMessage") {
            $scope.message = event.data.payload;
            $scope.$apply();
          }
        });
      }]);
  </script>
</head>
<body ng-controller="MainCtrl" style="text-align: center; font-family: Arial, sans-serif; padding: 20px;">
  <h1 style="color: green;">AngularJS App (Parent Frame)</h1>
  <p>{{ message }}</p>
  <button
    ng-click="sendMessageToChild()"
    style="padding: 10px; font-size: 16px; cursor: pointer;"
  >
    Send Message to Child
  </button>
  <iframe
    style="width: 100%; height: 300px; border: 1px solid black; margin-top: 20px;"
    src="URL_TO_REACT_APP_HTML"
  ></iframe>
</body>
</html>