Stack Overflow
Stack Overflow

How do I refer to the document object of an – Bungle Oct 15 '09 at 15:59

0

I had to do this in a recent project, and I used this:

<iframe src="http://domain.com" width="100%" 
border="0" frameborder="0" id="newIframe"
 onload="$(this).css({height:this.contentWindow ? this.contentWindow.document.body.scrollHeight + (20) : this.contentDocument.body.scrollHeight + (20)});" 
style="border:none;overflow:hidden;">

</iframe>

Although I have the function inline (makes sense in my project, as the iframe is generated via PHP), If you are appending the iframe via javascript it would be something like

$("#container").append('<iframe src="http://domain.com" width="100%" border="0" frameborder="0" id="newIframe" style="border:none;overflow:hidden;"></iframe>');

$("#newIframe").load(function(){
  var _this=$("this")[0];
  $(this).css({
       height:
        _this.contentWindow ? _this.contentWindow.document.body.scrollHeight + (20) : _this.contentDocument.body.scrollHeight + (20)});
});

//contentWindow.document.body is for IE
//contentDocument.body is for everything else
ekhaled
  • 2,930
  • 20
  • 24
  • the +(20), if you are wondering, is because safari decides to put scrollbars on even though the contents of an iframe fit the ifram dimensions exactly... the extra 20px helps i find... – ekhaled Oct 15 '09 at 22:14
  • You can name it anything you want, it's just a temporary variable to hold the DOM element so that it can be accessed later in $().css({}) – ekhaled Oct 16 '09 at 14:59
  • Should this work on Webkit browsers? Chrome still sets the height of the iframe to the height of the parent document. I am calling $(this).css ... in the iframe's onload. – Don Zacharias Sep 10 '10 at 18:28