iframe autoheight

javascript jquery html iframe

11,190

Solution 1

Well I ended up taking a different approach. I got the contents from inside the iframe and inserted them inside a div. Here's the code in case anyone else needs it.. Thank you all for your patience and great help.

<script>
function getFile(){

var content = jQuery('#servercontent')[0];

var ifrm = jQuery('#ifrm')[0];

content.innerHTML = ifrm.contentDocument.body.innerHTML;

}
</script>
<body>
 <div id="servercontent"></div>
 <iframe id="ifrm" src="webinsamedomain.com" width="100%" frameborder="0" scrolling="no" style="display:none;"  onload="getFile();" ></iframe>
</body>

Solution 2

I have a feeling that this isn't working because the height is being calculated before the document has loaded. If you were to call sizeIFrame in the document.ready event it might make a difference.

In your IFrame try this code:

jQuery(function(){
   parent.sizeIFrame();
}

Update: As per our chat, you can get the height of the document in the IFrame with:

parent.jQuery(document).height()

I would say to pass the height as a parameter to your function.

Solution 3

You're using jQuery, try using the iFrameAutoHeight plugin

11,190

Author by

Andres

.NET programmer who has gone on a journey to learn PHP and JQuery. Still new but not a noob ;)

Updated on June 04, 2022

Comments

Andres almost 2 years

I've searched everywhere including here and haven't been able to come up with a good solution. I ran into this and it works in everybrowser except Firefox and IE :( Help?

jQuery(function() {
    sizeIFrame();
    jQuery("#ifrm").load(sizeIFrame);
});

function sizeIFrame() { 
    var videoBrowser = jQuery("#ifrm");
    var innerDoc = videoBrowser.get(0).contentDocument ?
        videoBrowser.get(0).contentDocument.documentElement :
        videoBrowser.get(0).contentWindow.document.body;
    videoBrowser.height(35);
    videoBrowser.height(innerDoc.scrollHeight + 35);
}

and it's on the same domain and here's my <iframe>

<iframe id="ifrm" src="http://localhost:8080/linkconsulting/temp.html" width="100%" frameborder="0" scrolling="no"></iframe>

I'm testing on localhost right now but it will still be on same domain later.

Update: So I've noticed that this is not working because it seems to be interfering with tiny.scrollbar plugin or viceversa. Not sure what to do here :(