Resize dynamic iframe (problem with Chrome)

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;" />

Solution 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>

Solution 2

This was killing me like everyone else and I have come up with an example that seems to be compatible with IE8, Chrome, Safari and FF. I have not tested it in IE7 or IE6.

I cannot take 100% of the credit because I got bits and pieces from different sites. Most solutions I came across overcomplicated the issue.

I use coldfusion so you will need to check the browser in your own language.

<SCRIPT LANGUAGE="JavaScript">
function resizeIframeToFitContent(iframe) {
    // This function resizes an IFrame object
    // to fit its content.
    // The IFrame tag must have a unique ID attribute.
    iframe.height = document.frames[iframe.id].document.body.scrollHeight + "px";}
</SCRIPT>

If it is FF, Safari or Mozilla (any version) you can use this script

<SCRIPT LANGUAGE="JavaScript">
function resizeIframeToFitContent(iframe){
  //for some reason I have to reset the frame height to zero otherwise it will retain the height from the last 
  //click inside of the frame. You can set this to 0 or pick a good height so it only resizes when the content is larger than xx pixels
  var height = 780; 
  var theFrame = window.frames[iframe.id]; 
  //check your iframe.id to make sure you are getting back the correct id.
  theFrame.frameElement.height = height;
  //now lets get the height of the content and reset the height of the frame.
  height = parseInt(theFrame.document.body.scrollHeight);
  //now I have see this numerous times and many programmers try to set the frameElements.style.height attribute
  //that does not work in Safari, Chrome or FF so drop the style and you are good to go.
  theFrame.frameElement.height = height;
}
</SCRIPT>

IE8 is a little nicer to us programmers

<SCRIPT LANGUAGE="JavaScript">
function resizeIframeToFitContent(iframe) {
    // This function resizes an IFrame object
    // to fit its content.
    // The IFrame tag must have a unique ID attribute.
    iframe.height = document.frames[iframe.id].document.body.scrollHeight;}
</SCRIPT>

Here is the IFRAME script you can remove the background color and set your own width and url.

<IFRAME id="myiframe" name="myiframe"
        src="<your url>"
        width=800
        style="background-color: #FAF9F8;"
        onload="resizeIframeToFitContent(this)" scrolling="no" frameborder="0">

That pretty much covers it.