How To Resize an IFrame to the Size of Its Contents Without Displaying Scroll Bars

be careful to get the body of iframe from document.getElementById() in ie7.
I span a lot of time in this part, in the first begining i retrive iframe body by document.getElementById("iframe1").document.body
but it always get a fixed size value about 600 from the scrollHeight of body attribute, this is confuse me for a long while, after many researched i realized the reason why scrollHeight get a wrong size.

If you retrive the body in iframe by using document.getElementById("iframe1").document.body, you will get the wrong body reference in ie7, because this reference isn't point to the body of the iframe, it's point to the parent's body of iframe, I wonder is it the bug in ie7?

so how do i get the correct iframe's body the answer is window.iframes["iframe1"].document.body or window.iframes[0].document.body.

the conclusion that is document.getElementById("iframe1") and window.iframes["iframe1"] is not the same object in ie7, if you wanna get iframe object it self you can use document.getElementById("iframe1"), if you want to get the document inside the iframe you should use window.iframes["iframe1"] .

yeha it's quit weird, but it solved the real world problem.

<script type="text/javascript">
    var ifrm = null, adjustHeight = 100;

    // Invoke initIfrm() where the page contains iframe element, usually invoke by window.onload event.
    function initIfrm()
    {
        ifrm = document.getElementById(iframeId);
        // firefox
        if(ifrm.addEventListener)
        {
            ifrm.addEventListener("load", resizeHeightEvent, false);
        }
        // IE
        else if(ifrm.attachEvent)
        {
            ifrm.detachEvent("onload", resizeHeightEvent);
            ifrm.attachEvent("onload", resizeHeightEvent);
        }
    }
   
    function resizeHeightEvent()
    {
        var ifrmBody = null;

        // Firefox
        if(typeof (ifrm.contentDocument) == "object")
        {
            ifrmBody = ifrm.contentDocument.body;
        }
        // IE
        else if(typeof (ifrm.document) == "object")
        {
            ifrmBody = window.frames[ifrm.id].document.body;
        }
       
        if(ifrmBody == null)
        {
            throw "the body not found in the page content, ifrmBody is null.";
        }
        // Firefox
        if(ifrm.contentDocument && ifrmBody.offsetHeight)
        {
            ifrm.style.height = (ifrm.contentDocument.body.offsetHeight + adjustHeight) + "px";
        }
        // IE
        else if(ifrm.document && ifrmBody.scrollHeight)
        {
            ifrm.style.height = "100px";
            ifrm.style.height = (ifrmBody.scrollHeight + (ifrmBody.offsetHeight - ifrmBody.clientHeight) + adjustHeight) + "px";
        }
    }

    </script>

In the page declare the iframe like this

<iframe id="iframe1" name="iframe1"  scrolling="no" marginwidth="0" marginheight="0"
            frameborder="0" vspace="0" hspace="0" style="overflow:visible; width:100%; height:100%;"></iframe>

References

Microsoft Support: How To Resize an IFrame to the Size of Its Contents Without Displaying Scroll Bars