Change iFrame Height according to iFrame content (no jQuery required)

In the Parent page (which references the iframe), include the following in a script tag within your head section of your html:

if (window.addEventListener) {
addEventListener(“message”, messageListener, false)
} else if (window.attachEvent) {
attachEvent(“onmessage”, messageListener)
}
function messageListener(event) {
var originSecure = event.origin === “http://myiframe.com ” ;
if (!originSecure)
return;

if (parseInt(event.data) > 0)
document.getElementById(“test”).style.height = event.data + “px”;
}

 

Meanwhile, in your iframe include the following post message in your document ready script:

parent.postMessage(window.innerHeight, “*”);