HTML Element's Height Property not set by Internet Explorer

StackOverflow https://stackoverflow.com/questions/719657

Question

I've written a Javascript script that automatically resizes the height of an IFrame, depending on its content. This is done as soon as the content of the framed page is produced; in Firefox no problem, but in IE the script is correctly executed but no effect is seen: the method is called in a callback function. Any sugestions? If I execute the method using a button, it works perfectly, and the frame get resized.

I havn't the code right in front of me; the resizing method looks like this: 

function resizeFrame(){
    var frame = parent.document.getElementsById(window.me);
    frame.style.height = document.offsetHeight;
}

And the calling function is like this:

//init function
bunding.doSomeWork(callbackFunction);
...

function callbackFunction()
{
    //does some HTML output
    resizeFrame();
}

I'm using Salesforce Ajax library.

Was it helpful?

Solution

I have found that in some cases in IE properties such as offsetHeight, clientHeight and scrollHeight are not correctly set when new content has been added. I've had to use setTimeout in order to allow the display to be repainted before being able to get accurate values from such properties.

OTHER TIPS

Hard to really debug your code without seeing it, but the following example works well for me in IE and Firefox.

<!DOCTYPE html>
<html>
<head>
  <title>so-iframeResize</title>
  <script type="text/javascript" >

    onframeload=function(iframe) {
      var doc = iframe.contentWindow.document;
      iframe.style.height = Math.max(
        doc.getElementsByTagName("html")[0].offsetHeight,
        doc.body.offsetHeight // IE prefers this value
      ) + "px";
    };

  </script>
</head>
<body>
  <div id="page">
    <iframe src="about:blank" onload="onframeload(this)">
    </iframe>
  </div>
</body>
</html>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top