Tutorial :HTML Element's Height Property not set by Internet Explorer



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.


Solution:1

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.


Solution:2

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>  

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »