使iframe高度适应内容

Question

如何使iframe的高度根据其中的内容自适应？我猜测您需要计算内容高度与iframe高度之间的差值（这是我不知道如何做的事情），并使用while循环增加一个变量作为高度，但我无法理解如何实际完成这些操作。在提问之前，请注意：是的，框架中的内容来自我的网站。不是跨域。

- Anonymous

---

还有人在使用框架吗？ - yoda

他的意思是iframe，它们只被像Google和Facebook这样的微不足道的公司在网络领域中使用。 - Itay Moav -Malimovka

您的网站中是否包含了这个框架内容？ - Trufa

可能是根据内容调整iframe大小的重复问题。 - Pablo Fernandez

你看过这个 GitHub 项目吗？https://github.com/house9/jquery-iframe-auto-height - jpwco

Answer 1

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

将 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;

- Val Schuman

---

无效。你不能从iframe外部访问iframe内部的div元素。 - Pablo Fernandez

你可以这样做：document.getElementById("frameId").contentWindow.document.getElementById("id")。 - JCOC611

@JCOC611 我所看到的是，如今禁止访问 document.getElementById("frameId").contentWindow.document（至少在FF中）。 - YakovL

@YakovL 看起来在 Chrome 56.0 中运行良好。确保主文档和 iframe 在同一个域中。 - JCOC611

@JCOC611 抱歉，我可能在问题中错过了“非跨域”部分或者在弄明白仅对跨域不起作用之前就进行了评论。不过，需要注意这个答案：https://dev59.com/RXVC5IYBdhLWcg3w4Vf6#362564 - YakovL

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>

在 something.html 文件中，在底部或 onload 事件中，可以执行以下操作：

window.parent.window.onContentChange()

- Itay Moav -Malimovka

---

当我写这个的时候，我是一个mootools的人。 - Itay Moav -Malimovka

Answer 3

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

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

- Erik Bergstedt

Answer 4

在JavaScript中，一旦容器元素（“td1”）被绘制出来，动态渲染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>

- Luis