Last year, I was working on our MULPROJ layout, and the type of layout I was making needed an iframe whose height is auto resized according to the source page’s content. This means that there should be no vertical scrollbar in the iframe, it simply adjusts itself vertically.
I thought that it wasn’t possible to do this but I found a JavaScript code that can do the trick, and I just want to share it with you. 😉
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<p><script language="JavaScript"></p> <p> function autoResize(id){<br /> var newheight;<br /> var newwidth;</p> <p> if(document.getElementById){<br /> newheight=document.getElementById(id).contentWindow.document .body.scrollHeight;<br /> newwidth=document.getElementById(id).contentWindow.document .body.scrollWidth;<br /> }</p> <p> document.getElementById(id).height= parseInt(newheight) + 45 + "px";<br /> document.getElementById(id).width= (newwidth) + "px";<br /> }<br /> </script><br /> </p> <p><iframe SRC="yourPage.html" width="100%" id="iframe1" marginheight="0" frameborder="0" onLoad="autoResize('iframe1');"></iframe></p> |
Save the above code as iframe.html, or whatever you like.
Remember to create the file yourPage.html in the same folder as your previous html file.
I stumbled upon it on: this forum thread.
I also did a little editing.
