动态调整动态更改内容高度的iFrame高度(内部说明)

Question

我有一个iframe，它由一个带有一些jQuery验证的表单组成，如果出现错误，它会导致内容的高度增加。

下面你可以找到我用来动态更改iFrame高度的插件：

function doIframe(){
o = document.getElementsByTagName('iframe');
for(i=0;i<o.length;i++){
    if (/bautoHeightb/.test(o[i].className)){
        setHeight(o[i]);
        addEvent(o[i],'load', doIframe);
    }
  }
}
function setHeight(e){
if(e.contentDocument){
    e.height = e.contentDocument.body.offsetHeight + 35;
  } else {
    e.height = e.contentWindow.document.body.scrollHeight;
  }
}
function addEvent(obj, evType, fn){
  if(obj.addEventListener)
  {
   obj.addEventListener(evType, fn,false);
   return true;
  } else if (obj.attachEvent){
    var r = obj.attachEvent("on"+evType, fn);
    return r;
  } else {
      return false;
  }
}
if (document.getElementById && document.createTextNode){
  addEvent(window,'load', doIframe);    
}

为了设置高度，我做了$("#booking_iframe").iframeAutoHeight({minHeight: 840});。

如果iFrame内容的高度由于jQuery验证而发生变化，我如何修改代码（或者可能使用其他代码）来动态更改iFrame的高度？

你可以通过点击这里并在侧边栏中填写表格来看到这一点。

Answer 1

如果iFrame内容发生更改，则通过jquery调整大小插件更改高度：

示例&使用jQuery调整大小事件:的代码

第[节随着Iframe内容的增长调整Iframe的大小]

http://benalman.com/code/projects/jquery-resize/examples/resize/

插件项目URL:

http://benalman.com/projects/jquery-resize-plugin/

Answer 2

如果您定义了一个名为resizeCallBackFunction（）的函数，该函数会调整顶级文档（包含iframe的文档）中的iframe大小，那么每当iframe中文档的内容发生变化时，您就可以从iframe内的文档中这样调用它（并传递一个参数，如高度）：

 window.top.window.resizeCallBackFunction(height);

这在所有浏览器（MSIE 6-9、Firefox、Chrome、Safari…）中都能可靠工作。