javascript - 动态调整iFrame高度动态改变内容高度(里面有解释)

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

如果 iFrame 内容更改，则通过 jquery-resize-plugin 在此处更改高度:

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

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

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

插件项目网址:

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