adaptive iframe using postMessage()

child.html

<h2> Hello World! </h2>
<script>
  function iframeResize() {
    var body = document.body, html = document.documentElement;
    var height = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight);
    var location = document.location.href;
    window.parent.postMessage(["setHeight", height, location], "*");
  }
  iframeResize();
  $(window).resize(iframeResize);
</script>

parent.html

<iframe id="iframe1" src="child.html" frameborder="0" width="100%" scrolling="no" height="0"></iframe>
<script>
    window.addEventListener('message', function(e) {
        var $iframe = document.getElementById('iframe1');
        var height = e.data[1];
        if (e.data[0]==='setHeight') {
            $iframe.style.height = height + 'px';
        }
    }, false);
</script>