Iframe height issue - make iframe height dynamic based on content inside

child.js

(function(){

'use-strict';

/**
 * Iframe to Parent window communication
 * sample iframe- <iframe id="guestFrame" name="guestFrame" src="http://other-domain.com/">
 * </iframe>
 * Uses https://ternarylabs.github.io/porthole/
 * Uses https://marcj.github.io/css-element-queries/  
 */
window.onload = function(){

  var proxy = window.proxy  = new Porthole.WindowProxy('http://parent-domain.com/');
  proxy.addEventListener(function(messageEvent) {
      // handle event
  });

  //Height setup
  var iframeHeight = 0;
  
  var element = document.getElementsByTagName("BODY")[0];
  new ResizeSensor(element, function() {
    
    var scrollHeight = $('body').outerHeight();
    if (iframeHeight === scrollHeight) return false;
    
    iframeHeight = scrollHeight;
    proxy.post({
      height: scrollHeight,
    });
    
  });

  Porthole.WindowProxyDispatcher.start();

};

})();

parent.js

(function(){

'use-strict';

//This soultion we have used  - https://ternarylabs.github.io/porthole/
// example - 

var iFrameId: 'guestFrame',
window.onload = function(){
    // Create a proxy window to send to and receive
    // messages from the iFrame
    var windowProxy = new Porthole.WindowProxy(
        'http://other-domain.com/', iFrameId);

    var $viewPort = $('#'+iFrameId);
    // Register an event handler to receive messages;
    windowProxy.addEventListener(function(messageEvent) {
      
      if( messageEvent.data.height == $viewPort.height() ){
        return;
      }
  		$viewPort.height(messageEvent.data.height);
  	});

    Porthole.WindowProxyDispatcher.start();
};


})();