javascript - Dynamically adjust iFrame height of dynamically changing content height(里面有解释)

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

如果 iFrame 内容的高度因 jQuery 验证而发生变化，我该如何修改代码(或者可能使用其他代码)以动态更改 iFrame 的高度？

您可以通过转至 here 查看实际效果并填写侧边栏中的表格。

Answer 1

通过 jquery-resize-plugin 在 iF​​rame 内容更改时更改高度:

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

部分 [随着内容的增长调整 iframe 的大小]

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

插件项目网址:

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