ronanguilloux/gist:5317541

## gistfile1.js
//parent.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script type="text/javascript">
    window.addEventListener("message", receiveSize, false);
    function receiveSize(e) {
//console.log("parent: message received", e);
        // for security: set this to the domain of the iframe - use e.uri if you need more specificity
        if (e.origin === "http://site.com/")
            document.getElementById("iframeWebapp").style.height = e.data + "px";
            jQuery("#iframeWebapp").height(e.data + "px");
//console.log("parent: iframe resized", e);
//console.log("parent: new iframe height:", document.getElementById("iframeWebapp").style.height);
    }
</script>
</head>
<body>
    Cette iframe verte fait initialement 920px de haut
    <br />
    <iframe id="iframeWebapp" src="http://site.com/iframe.html" scrolling="no" width="920px" height="930px" frameborder="0" scrolling="no" style="border:1px solid green">
    </iframe>
</body>
</html>


//iframe.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<script type="text/javascript">
    window.addEventListener("load", postSize, false);
    function postSize(e){
//console.log("iframe: postSize() called on load",e);
        var target = parent.postMessage ? parent : (parent.document.postMessage ? parent.document : undefined);
        if (typeof target != "undefined" && document.body.scrollHeight)
//console.log("iframe: postingMessage :");
//console.log(document.getElementById("myBody").scrollHeight, "*");
            target.postMessage(document.getElementById("myBody").scrollHeight, "*");
    }

</script>
</head>
<body id="myBody" style="height:1200px; border:1px dotted red">
Cette iframe rouge fait maintenant 1200px de haut
</body>
</html>
	//parent.html

	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
	<html>
	<head>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
	<script type="text/javascript">
	window.addEventListener("message", receiveSize, false);
	function receiveSize(e) {
	//console.log("parent: message received", e);
	// for security: set this to the domain of the iframe - use e.uri if you need more specificity
	if (e.origin === "http://site.com/")
	document.getElementById("iframeWebapp").style.height = e.data + "px";
	jQuery("#iframeWebapp").height(e.data + "px");
	//console.log("parent: iframe resized", e);
	//console.log("parent: new iframe height:", document.getElementById("iframeWebapp").style.height);
	}
	</script>
	</head>
	<body>
	Cette iframe verte fait initialement 920px de haut
	<br />
	<iframe id="iframeWebapp" src="http://site.com/iframe.html" scrolling="no" width="920px" height="930px" frameborder="0" scrolling="no" style="border:1px solid green">
	</iframe>
	</body>
	</html>


	//iframe.html

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
	<html>
	<head>
	<script type="text/javascript">
	window.addEventListener("load", postSize, false);
	function postSize(e){
	//console.log("iframe: postSize() called on load",e);
	var target = parent.postMessage ? parent : (parent.document.postMessage ? parent.document : undefined);
	if (typeof target != "undefined" && document.body.scrollHeight)
	//console.log("iframe: postingMessage :");
	//console.log(document.getElementById("myBody").scrollHeight, "*");
	target.postMessage(document.getElementById("myBody").scrollHeight, "*");
	}

	</script>
	</head>
	<body id="myBody" style="height:1200px; border:1px dotted red">
	Cette iframe rouge fait maintenant 1200px de haut
	</body>
	</html>