I need solution for auto adjust width height of iframe to fit with content in it, and the point is the content size (width, height) could be change after iframe loaded. I guess i need a event action when body size changed.
+4
A:
Try this code it will solve the problem completely and it's simple:
<script language="JavaScript">
<!--
function autoResize(id){
var newheight;
var newwidth;
if(document.getElementById){
newheight=document.getElementById(id).contentWindow.document .body.scrollHeight;
newwidth=document.getElementById(id).contentWindow.document .body.scrollWidth;
}
document.getElementById(id).height= (newheight) + "px";
document.getElementById(id).width= (newwidth) + "px";
}
//-->
</script>
<IFRAME SRC="usagelogs/default.aspx" width="100%" height="200px" id="iframe1" marginheight="0" frameborder="0" onLoad="autoResize('iframe1');"></iframe>
Ahmy
2009-05-04 09:33:39
Not standards compliant, but by far the most easy way to do this.
Pim Jager
2009-05-04 09:39:06
I don't know what do u mean with Not standards compliant?
Ahmy
2009-05-04 09:42:18
does it cross browser?
StoneHeart
2009-05-04 10:15:55
@StoneHeart: yes, it's cross browser. The code is non-standard compliant because of contentWindow property, which isn't defined in DOM spec. In DOM spec exists property called contentDocument, but Internet Explorer 6 (and 7?) doesn't support it. The contentWindow property can be used instead and it's implemented in all common browsers (Gecko, Opera, Webkit, IE).
Rafael
2009-05-04 10:28:47
BTW. the scrollHeight property - IIRC - also isn't standard compliant, but is also supported by all common browsers. You can use offsetHeight or other properties instead, but scrollHeight gives best results
Rafael
2009-05-04 10:37:48
A:
There are some issues with browsers.
Here is a cross-browser solution with jQuery:
FFish
2010-10-04 09:09:33