How to 'grow' an iFrame depending on the size of its contents?

Question

I'm loading the iFrames dynamically and some pages are 'taller' than others. I'd like the iFrame to grow accordingly. Is it possible? If so, how?

Answer 1

You might be able to do something like

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

But if you really need to have an iframe grow depending on the content then I suggest you try another html element as an iframe might not be what you need.

Answer 2

Yes, it is possible by jquery. Parent page 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();
  }
}

Reassign height after postback:

function pageLoad() { // MS AJAX - UpdatePanel
  AssignFrameHeight();
}

$(document).ready(function() { // jQuery
  AssignFrameHeight();
});

Answer 3

try using width:100%; height:100% and apply them on your iframe element