如何根据内容的大小“增长”iFrame？ [英] How to 'grow' an iFrame depending on the size of its contents?

问题描述

我正在动态加载iFrame，而某些页面比其他页面更高。我希望iFrame能够相应增长。可能吗？如果是这样，怎么样？

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?

推荐答案

是的，有可能是jquery。
父页面代码：

Yes, it is possible by jquery. Parent page code:

<iframe id='ifrm' />

iframe页面上的脚本：

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

回发后重新分配高度：

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

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

这篇关于如何根据内容的大小“增长”iFrame？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！