parent/iframe postMessage

<!doctype html>

<html>
  <head>
    <link rel="stylesheet" href="lib/style.css">
    <script src="lib/script.es6.js"></script>
  </head>

  <body ng-app="myTestApp" ng-cloak>
    <div ng-controller="MainCtrl as vm">
      <h1>
        Parent
        <button ng-click="vm.postMsg()">
          send msg to iframe
        </button>
      </h1>
      <iframe width="400" height="160"
          id="myiframe"
          src="otherpage.html" 
          frameborder="0"
          scrolling="no" marginheight="0" marginwidth="0"></iframe>
      <hr/>
      <test-dir-two></test-dir-two>
      <test-dir-two></test-dir-two>
      <hr/>
    </div>
  </body>
</html>

import angular from 'angular';

angular
  .module('myTestApp', [])
  .service('MyTestService', function($rootScope) {
    const _subs = [];
    const _latestVal = null;
    const _myIframe = document.getElementById("myiframe").contentWindow;

    this.next = (val) => {
        _latestVal = val;
        this.val = val;
        _subs.forEach(s => s(val))
    };

    this.post = (msg) => {
      _myIframe.postMessage(msg, "*");
    };

    this.subscribe = (cb) => {
      _subs.push(cb);
      cb(_latestVal);
      return () => {
        if(_subs.indexOf(cb) > -1) 
          _subs.splice(_subs.indexOf(cb), 1)
      };  
    };

    window.addEventListener("message", (e) => {
      $rootScope.$apply(() => {
        if(e.source === _myIframe)
          this.next(e.data);
      });
    }, false);
  })
  .directive('testDirTwo', function(MyTestService) {
      return {
        controllerAs: 'vm',
        scope: {},
        controller: function($scope) {
          const vm = this;
          const unsub = MyTestService.subscribe(data => {
            vm.lastMessage = data;
          });
          $scope.$on('$destroy', () => unsub());
        },
        template: '<pre>Last message 2: {{vm.lastMessage}}</pre>'
      }
  })
  .controller('MainCtrl', function($scope, MyTestService) {
    const vm = this;
    const index = 0;
    vm.postMsg = () => {
      MyTestService.post('from parent: ' + (++index))
    };
  });

[ng\:cloak],
[ng-cloak],
[data-ng-cloak],
[x-ng-cloak],
.ng-cloak,
.x-ng-cloak {
    display: none !important;
}

h1,
p {
    font-family: sans-serif;
}

{
  "name": "@plnkr/starter-angularjs",
  "version": "1.0.1",
  "description": "AngularJS starter template",
  "dependencies": {
    "angular": "^1.6.9",
    "rxjs": "^6.5.2"
  },
  "plnkr": {
    "runtime": "system",
    "useHotReload": false
  }
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://code.jquery.com/jquery-1.6.4.js"></script>
  <script>
    $(document).ready(() => {
      let count = 1;
      $('#helloBtn').click(() => {
        window.parent.postMessage('msg from iframe: ' + (count++), '*')
      });
      window.addEventListener("message", (e) => {
        $('#msgLog').html(e.data);
      }, false);
    })
  </script>
</head>

<body style="background-color:#eee;">
  <div>
    <h3>
      Iframe
    </h3>
    <button id="helloBtn">
      send msg to parent
    </button>
    <pre>msg from parent:</pre>
    <pre id="msgLog"></pre>
  </div>
</body>

</html>