Question

我有一个iframe，它包含一个带有jQuery验证的表单，如果有错误，会导致内容的高度增加。

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

function doIframe(){
o = document.getElementsByTagName('iframe');
for(i=0;i<o.length;i++){
    if (/\bautoHeight\b/.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});。

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

您可以通过转到here并填写侧边栏中的表单来查看此操作。

Answer 1

如果iFrame内容通过jquery-resize-plugin在此处更改完成，则更改Hight：

示例＆amp;使用 jQuery resize事件的代码：

部分[在内容增长时调整iframe的大小]

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

插件项目网址：

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 ...）。

动态调整动态变化内容高度的iFrame高度（内部说明）

2 个答案: