Как «вырастить» iFrame в зависимости от размера его содержимого?

Question

Я загружаю iFrames динамически, и некоторые страницы "выше", чем другие. Я хотел бы, чтобы iFrame рос соответствующим образом. Является ли это возможным? Если да, то как?

Answer 1

Да, это возможно с помощью jquery. Код родительской страницы:

<iframe id='ifrm' />

Скрипт на странице iframe:

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

Переназначить высоту после обратной передачи:

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

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

Answer 2

Возможно, вы сможете сделать что-то вроде

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

Но если вам действительно нужно увеличить размер iframe в зависимости от содержимого, я предлагаю вам попробовать другой элемент html, поскольку iframe может не соответствовать вашим потребностям.

Answer 3

попробуйте использовать ширину: 100%; высота: 100% и примените их к элементу iframe