CODEWITHSUNDEEP
javascriptjqueryiframe
DaveDev
DaveDev

Reputation: 42185

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

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?

Upvotes: 4

Views: 6776

Answers (3)

Alex Pacurar
Alex Pacurar

Reputation: 5861

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

Upvotes: -2

VMAtm
VMAtm

Reputation: 28355

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();
});

Upvotes: 7

JoseMarmolejos
JoseMarmolejos

Reputation: 1770

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.

Upvotes: 2

Related Questions