动态增加 iframe 的高度答案

【问题标题】：To dynamically increase the height of the iframe动态增加 iframe 的高度
【发布时间】：2014-05-30 14:05:17
【问题描述】：

我有一个插入 iframe 的页面。加载子页面时，我使用以下代码动态设置 iframe 的值：

父页面：

`<iframe src="/test.do" id="iframeTest">`
function setIframeHeight(height) {
$("#iframeTest").height(height);
}

子页面：test.jsp：

  <div id="test">
  <table>The whole content will be inside this div</table> 
  </div>
    $(document).ready(function() {
    var height = $("#test").outerHeight();
    parent.setIframeHeight(height);
        }

现在，每当子页面的高度增加时（即每当包含新的 <tr> 时），我都会调用 parent.setIframeHeight() 以增加 iframe 高度。我对此进行了测试，对我来说效果很好。我想知道增加 iframe 高度是否正确？或者有没有其他选择。

【问题讨论】：

要根据iframe DOM设置高度吗？？
能否提供jsfiddle。
是的，没关系，另一个是$('#iframeTest').attr('height',height);，我相信.height() 几乎是一条捷径..

标签： javascript jquery html css iframe

【解决方案1】：

试试这个：如果您的子页面内容连续或经过一些时间间隔发生变化：

setInterval(function(){iframeLoaded}, 2000);

function iframeLoaded() {
  var iFrameID = document.getElementById('iframeTest');
  if(iFrameID) {
        // here you can make the height, I delete it first, then I make it again
      iFrameID.height = "";
      iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px";
  }   
 }

【讨论】：