Question

So I’ve been looking around at all the other Stack Overflow posts and around google about how to set the height/width automatically on an iFrame. I’ve gone through about 15-20 of them and none have worked for me so far. Let me try to explain my situation:

I’m dynamically setting the body of an iFrame on my page. I’m needing the iFrame to automatically set its height and width accordingly so all text is visible.

I’m needing this to work in IE (7 & 8), FireFox 3, and Chrome.

Here are the other problems that creap into the issue:

1. I’m writing in ASP.Net with a master page (so the body element is out of the question).
2. I’m needing to set the text of the iFrame on each postback from the server.
3. I’m needing the iFrame to resize when the browser resizes.
4. All I have access to is javascript, nothing else.

I am writing everything on the same domain, so thats not a problem.

I feel like what I currently have is just a rig and will fall apart at any moment. It displays correct in IE but has a huge bottom margin in FireFox and doesn’t display at all in Chrome (doc is always null).

Here it is (I tried to be as detailed as possible, let me know if I need to explain more):

   <script type="text/javascript">
        function WriteIFrame()
        {
            // get the text i need to put in the iFrame (this is set from the server)
            var iFrameContent = document.getElementById("<%= hiddenIFrameContent.ClientID %>").value;
            var iFrameContainer = document.getElementById("divIFrameContainer");

            // create the new iFrame object
            var iFrame = document.createElement("iframe");
            iFrame.setAttribute("id", "myIFrame");
            iFrame.setAttribute("scrolling", "no");
            iFrame.setAttribute("frameborder", "0");

            // add the new iFrame object to the container div
            iFrameContainer.appendChild(iFrame);

            // find the correct inner document of the iFrame
            var doc = iFrame.document;
            if (doc == null && iFrame.contentDocument)
                doc = iFrame.contentDocument;
            //

            // write the information into the iFrame
            if (doc != null)
            {
                doc.open();
                doc.writeln(iFrameContent);
                doc.close();
            }

            // set the proper height
            var height = doc.body.scrollHeight + iFrameContainer.offsetTop;
            iFrame.setAttribute("style", "width: 100%; height: " + height + "px;");
        }

    </script>

    <div id="divIFrameContainer" oninit="WriteIFrame();">
    </div>

    <iframe id="HelperIFrame" style="display: none;" onload="WriteIFrame();"></iframe>
     <textarea id="hiddenIFrameContent" runat="server" style="display: none;" />

Answer 1

Welllll, after messing around with this a couple hours I finally got it to work.

Just so I make it obvious, there’s a timing issue with Chrome. If you dynamically set the content of an iFrame on page load you have to wait a few milliseconds before you can correctly set the height. That’s why I used the setTimeout function and it worked every time for all browsers, if you didn’t, sometimes Chrome would be twice as large as it should have been.

Here’s the code that I used to make it work in IE, FF, and Chrome:

<script type="text/javascript">

    function OnIFrameLoad()
    {
        _frame = document.createElement("iframe");
        _frame.setAttribute("scrolling", "auto");
        _frame.setAttribute("frameborder", "0");
        _frame.setAttribute("style", "width: 100%;");
        _frame.style.width = "100%";

        document.getElementById("IFrameContainer").appendChild(_frame);

        _innerDoc = _frame.document;

        if (_frame.contentDocument)
            _innerDoc = _frame.contentDocument; // For NS6
        if (_frame.contentWindow)
            _innerDoc = _frame.contentWindow.document; // For IE5.5 and IE6
        //

        window.parent.SetIFrameContent();

        // We're calling the ResizeIFrame function after 10 milliseconds because when
        // Chrome shows the iframe, it takes a few moments to get the correct height.
        setTimeout("window.parent.ResizeIFrame()", 10);
    }

    function SetIFrameContent()
    {
        var content = document.getElementById("<%= hiddenIFrameContent.ClientID %>").value;

        _innerDoc.open();
        _innerDoc.writeln(content);
        _innerDoc.close();
    }

    function ResizeIFrame(frameId)
    {
        var objectToResize = (_frame.style) ? _frame.style : _frame;
        var innerDocBody = _innerDoc.body;

        var newHeight = _innerDoc.body.clientHeight;
        if (_innerDoc.body.scrollHeight > newHeight)
            newHeight = _innerDoc.body.scrollHeight;
        //

        objectToResize.height = newHeight + 40 + "px";
    }
</script>

ASP Side:

<textarea id="hiddenIFrameContent" runat="server" style="display:none;" />

<div id="IFrameContainer"></div>