JavaScript 如何控制 iframe 子页面自适应高度？

[rogwan]

在 A 网站的页面中，用 iframe 嵌入一个来自 B 网站的子页面，怎么控制 iframe 子页面自适应高度？

比如，在 A 网站的 index.html 中，用 iframe 嵌入一个 B 网站的 child.html 子页面：

<iframe id="iframe_id" height=100% width=100% src="http://B.com/child.html" scrolling="no" frameborder=0></iframe>

（由于 child.html 是动态高度的）然后在上面这段代码下面，添加 JavaScript 来修改 iframe 高度：

<script type="text/javascript">
    var x = document.getElementById("iframe_id");
    x.height=document.documentElement.clientHeight;
</script>

修改 iframe 的高度之后，child.html 页面下半截还是被遮住（显示不完全）。把 clientHeight 改成 scrollHeight 也一样不能完全显示 child.html 的全部高度。

[hjdtl]

把 overflow 设置为 scroll 试一下

[J0k3r]

<iframe width="100%" border="0" marginwidth="0" marginheight="0" frameborder="0" scrolling="no"
src="http://B.com/child.html" onload="this.height=document.documentElement.clientHeight">
</iframe>

[rogwan]

@hjdtl
@J0k3r
建议的方法是不是只能在同一个域名的前提下在能生效？

我在两个不同域名之间 A 网站的 index.html 页面，用 iframe 嵌入了 B 网站 的 child.html 子页面，发现就不能起作用了？

[yoonper]

跨域 IFRAME 自适应高度
http://www.yoonper.com/post.php?id=26

[beginor]

@yoonper 👍

[Kokororin]

window.postMessage

[J0k3r]

@rogwan 你试试我给你的方法，应该可以的，我一直就这么用的