How to "increase" iFrame depending on the size of its contents?

Question

I load iFrames dynamically, and some pages are “taller” than others. I would like the iFrame to grow accordingly. Is it possible? If so, how?

Answer 1

Yes, this is possible with jquery. Parent Code:

<iframe id='ifrm' /> 

Script on iframe page:

 function alertSize() { var myHeight = 0; if (typeof (parent.window.innerWidth) == 'number') { //Non-IE myHeight = parent.window.innerHeight; } else if (parent.document.documentElement && (parent.document.documentElement.clientWidth || parent.document.documentElement.clientHeight)) { //IE 6+ in 'standards compliant mode' myHeight = parent.document.documentElement.clientHeight; } else if (parent.document.body && (parent.document.body.clientWidth || parent.document.body.clientHeight)) { //IE 4 compatible myHeight = parent.document.body.clientHeight; } //window.alert( 'Height = ' + myHeight ); return myHeight; } function AssignFrameHeight() { var theFrame = $("#ifrm", parent.document.body); var frameHeight1 = getIframeHeight('ifrm'); var frameHeight2 = $(document.body).height(); if ($(document.body)[0]) { if ($(document.body)[0].bottomMargin) frameHeight2 += Number($(document.body)[0].bottomMargin); if ($(document.body)[0].topMargin) frameHeight2 += Number($(document.body)[0].topMargin); } if (frameHeight1 > frameHeight2) { theFrame.height(frameHeight1 - 20); } else { if ($.browser.msie) theFrame.height(frameHeight2); else theFrame.height(frameHeight2 + 50); } } function getIframeHeight(iframeName) { //var iframeWin = window.frames[iframeName]; var iframeEl = parent.document.getElementById ? parent.document.getElementById(iframeName) : parent.document.all ? parent.document.all[iframeName] : null; if (iframeEl) { iframeEl.style.height = "auto"; // helps resize (for some) if new doc shorter than previous //var docHt = getDocHeight(iframeWin.document); // need to add to height to be sure it will all show var h = alertSize(); //var new_h = (h - 148); //iframeEl.style.height = h + "px"; return h; //alertSize(); } } 

Override height after postback:

 function pageLoad() { // MS AJAX - UpdatePanel AssignFrameHeight(); } $(document).ready(function() { // jQuery AssignFrameHeight(); }); 

Answer 2

You might be able to do something like

 document.getElementById('your-iframe').height=new_height; 

But if you really need the iframe to grow depending on the content, I suggest you try a different html element, as the iframe may not be what you need.

Answer 3

try to use the width: 100%; height: 100% and apply them to the iframe element