Enrico Murru
Enrico Murru

Reputation: 2331

HTML Element's Height Property not set by Internet Explorer

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.

Upvotes: 0

Views: 4415

Answers (2)

Mister Lucky
Mister Lucky

Reputation: 4073

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>

Upvotes: 1

AnthonyWJones
AnthonyWJones

Reputation: 189457

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.

Upvotes: 1

Related Questions