Question

如何让iframe的高度调整到其中的内容？我假设您计算内容高度和iframe高度之间的差异（我不知道该怎么做）并使用while循环来增加变量以用作高度，但我无法包装我的围绕如何实际做这些事情。在询问之前：是的，框架中的内容来自我的网站。不是跨域。

Answer 1

不太确定为什么要使用iframe而不是动态div填充，例如，通过ajax，但是：

将iframe中的内容放入div中，然后获取div的高度。我建议像这样使用jquery：

$("#divId").height();

但是如果你不能使用jquery，你应该可以使用它：

document.getElementById("divId").offsetHeight;

然后你需要将iframe的高度设置为你得到的任何东西。

jquery的：

$("#iframeId").height($("#divId").height());

常规js：

document.getElementById("iframeId").style.height = 
document.getElementById("divId").offsetHeight;

Answer 2

<iframe id="moo" src="something.html"><iframe>
<script>
function onContentChange(){
  var NewSize=$('moo').getScrollSize();
  $('moo').setStyles({
    width: NewSize.x,
    height: NewSize.y
  });
}
</script>

并在somthing.html内部，在底部或onload事件上执行

行

window.parent.window.onContentChange()

Answer 3

在绘制容器元素（“td1”）后，在javascript中动态渲染iframe。

<script type="text/javascript">
  var iframesrc = "@Href("~/about")";
  function init() {
  var vHeight = document.getElementById("td1").offsetHeight;
  document.getElementById("td1").innerHTML="<iframe style=\"width:100%; height:" + vHeight + "px\" src=\"" + iframesrc + "\"></iframe>";
  }
  window.onload = init; 
</script>

...

<td id="td1" style="width: 100%; height:100%;">                 
</td>

Answer 4

这是使用jQuery的解决方案：

$('#iframe').height($('#iframe').contents().find('body').height());

使iframe高度符合内容

4 个答案: