Set page height depending on iframe height

Question

I want to embede iframe in vf page. But my page height is not gettin set to height of iframe. so i tried following code but was not able to set height depending on iframe height.

<apex:page id="hompage" title="Homepage Visualforce" showheader="false"
sidebar="false" cache="false" standardStylesheets="false">
<apex:includeScript value="{!URLFOR($Resource.ShowCycleStaticResources,
'ShowCycleStaticResources/JQuery/jquery.min.js')}" />

<script type="text/javascript">
  $(window).load(function() {
     var parentIFrame = document.getElementById('homepageComponentiFrameId');
     alert("window load occurred!"+parentIFrame.contents().find("body").height() );
 });

Can any body help to get

Answer 1

You can use the following piece of JavaScript to adjust the height of the iframe element to match the height of its content. You will get the full description in this link.

Iframe tag

<iframe src="iframe-content.html" frameborder="0" id="external-frame"></iframe>

JavaScript

<script>
    /*
     * When the iframe is on a different subdomain, uncomment the following line
     * and change "example.com" to your domain.
     */
    // document.domain = "example.com";
    function setIframeHeight(iframe) {
        if (iframe) {
            var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
            if (iframeWin.document.body) {
                iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
            }
        }
    };
    window.onload = function () {
        setIframeHeight(document.getElementById('external-frame'));
    };
</script>