lajlev/page-with-widget.html

## page-with-widget.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Page</title>
  <style>
    body {
      background: pink;
    }
    iframe {
      border: none;
      width: 100%;
    }
  </style>

</head>
<body>


  <script type="text/javascript">
    function resizeCrossDomainIframe(id, other_domain) {
      var iframe = document.getElementById(id);
      window.addEventListener('message', function(event) {
        if (event.origin !== other_domain) return; // only accept messages from the specified domain
        if (isNaN(event.data)) return; // only accept something which can be parsed as a number
        var height = parseInt(event.data) + 32; // add some extra height to avoid scrollbar
        iframe.height = height + "px";
      }, false);
    }
  </script>
  <iframe src='http://lajlev.dk/downloads/widget.html' id="my_iframe" onload="resizeCrossDomainIframe('my_iframe', 'http://lajlev.dk');">
  </iframe>


</body>
</html>

## widget.html
<!DOCTYPE html>
<head>
  <style>
    body {
      background: red;
    }
    img {
      max-width: 100%;
    }
  </style>
</head>
<body onload="parent.postMessage(document.body.scrollHeight, 'http://laj.lv/test');">
  <h3>Got post?</h3>
  <p>Lots of stuff here which will be inside the iframe.</p>
  <img src="http://placekitten.com/300/300" alt="">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, voluptate, assumenda, unde aliquid suscipit maiores porro at iusto et deleniti facere cum quo quis consequuntur nihil ex laboriosam minus ratione.</p>
</body>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Page</title>
	<style>
	body {
	background: pink;
	}
	iframe {
	border: none;
	width: 100%;
	}
	</style>

	</head>
	<body>


	<script type="text/javascript">
	function resizeCrossDomainIframe(id, other_domain) {
	var iframe = document.getElementById(id);
	window.addEventListener('message', function(event) {
	if (event.origin !== other_domain) return; // only accept messages from the specified domain
	if (isNaN(event.data)) return; // only accept something which can be parsed as a number
	var height = parseInt(event.data) + 32; // add some extra height to avoid scrollbar
	iframe.height = height + "px";
	}, false);
	}
	</script>
	<iframe src='http://lajlev.dk/downloads/widget.html' id="my_iframe" onload="resizeCrossDomainIframe('my_iframe', 'http://lajlev.dk');">
	</iframe>


	</body>
	</html>