postMessage test

postMessage.js

$(function () {
  console.log('init iframe');

  var $btn = $('#btn');
  var parent = window.parent;

  $btn.on('click', function() {
    parent.postMessage({from: 'iframe'}, '*');
  });

  window.addEventListener('message', function(e) {
    console.log('iframe');
    console.log(e);
  }, false);
});

(function (global) {

  function CreditCardForm(id) {
    var self = this;
    var $form = $(id);
    var formEvents = new FormEventListener($form);
    var messenger = new Messenger(window, window.parent);

    self.getFormData = function() {
      var data = {};

      return data;
    };

    self.createCreditCardToken = function() {
      // post
    };

    self.encryptData = function(data) {
      return data;
    };

    self.formDataChanged = function() {
      messenger.dispatch(self.getFormData());
    };

    (function init() {
      formEvents.notifyOnChange(self.formDataChanged);
      messenger.subscribe('cc-form', self.handler)
    })();
  }

  function FormEventListener($form) {
    var self = this;

    self.notifyOnChange = function(listener) {
      $form.on('form-data-changed', listener);
    };

    self.observeInputField = function(id) {
      $form.find(id).on('keyup', self.dataChangeEventHandler);
    };

    self.dataChangeEventHandler = function() {
      $form.trigger('form-data-changed');
    };

    (function init() {
      self.observeInputField('#cc-type');
      self.observeInputField('#cc-number');
      self.observeInputField('#cvv');
    })();
  }

  function Messenger(listenTo, sendTo) {
    var self = this;
    var $doc = $(document);

    self.dispatch = function(topic, data) {
      var e = {
        data: data,
        topic: topic,
      };
      sendTo.postMessage($.toJSON(e), '*');
    };

    self.subscribe = function(topic, subscriber) {
      $doc.on('post-message-data.' + topic, function(e) {
        subscriber(e.data.data);
      });
    };

    self.messageEventHandler = function(e) {
      var data = e.data || {};
      var topic = data.topic || 'global';

      $doc.trigger('post-message-data.' + topic, $.parseJSON(data));
    };

    (function init() {
      listenTo.addEventListener('message', self.messageEventHandler, false);
    })();
  }

  global.creditCardForm = new CreditCardForm('#cc-form');

})(window);