I very recently had this issue myself. Finally I solved it with the postMessage method.
In the document included to the iFrame I check whether it's actually running from an iFrame.
function inIframe(){ if(top != self){ var contentHeight = $('#myIframeContent').height(); //Just this part I did with jQuery as I was sure that the document uses it postSize(contentHeight); } }
If the document is running within an iFrame, call a function that we will call postSize.
function postSize(height){ var target = parent.postMessage ? parent : (parent.document.postMessage ? parent.document : undefined); if(typeof target != "undefined" && document.body.scrollHeight){ target.postMessage(height, "*"); } }
Add the following code to the document that includes your iFrame
function receiveSize(e){ if(e.origin === "http://www.mywebsite.net"){ var newHeight = e.data + 35; document.getElementById("myIframeID").style.height = newHeight + "px"; } } window.addEventListener("message", receiveSize, false);
Unfortunately I cannot remember the exact sources of all this as I was viewing a lot of different solutions here on Stackoverflow, but also different websites. But this solution works good for me.
Cheers