使 iframe 高度适合内容答案

【问题标题】：make iframe height fit content使 iframe 高度适合内容
【发布时间】：2011-02-09 01:18:26
【问题描述】：

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

【问题讨论】：

还有人用相框吗？
@yoda 他的意思是 iframe，它们只被谷歌和 Facebook 等网络领域的微不足道的公司使用。
框架内容在您的网站中？
Resizing an iframe based on content 的可能重复项
你看过这个 GitHub 项目吗？ github.com/house9/jquery-iframe-auto-height

标签： javascript html iframe

【解决方案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;

【讨论】：

这不起作用。您无法从 iframe 外部访问 iframe div
不过，您可以这样做：document.getElementById("frameId").contentWindow.document.getElementById("id")
@JCOC611 document.getElementById("frameId").contentWindow.document 这些天也被禁止访问，据我所知（至少在 FF 中）
@YakovL 看起来它在 Chrome 56.0 中运行良好。确保主文档和 iframe 在同一个域中。
@JCOC611 对不起，要么错过了“非跨域”。参与问题或评论之前认为它不仅适用于跨域。不过，有这个答案需要注意：stackoverflow.com/questions/153152/…

【解决方案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()

【讨论】：

当我写它的时候，我是一个 mootools 人。

【解决方案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>

【讨论】：

【解决方案4】：

这是一个使用 jQuery 的解决方案：

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

【讨论】：