iframe 高度被截断答案

【问题标题】：iframe height cut offiframe 高度被截断
【发布时间】：2017-05-19 09:59:24
【问题描述】：

我正在处理一个包含 iframe 的页面，我在 Firefox 中遇到了一个主要问题。我使用这个 javascript 来调整 iframe 大小：

<script language="JavaScript"> function autoResize(id){
var newheight;
var newwidth;

if(document.getElementById){
    newheight=document.getElementById(id).contentWindow.document .body.scrollHeight;
    newwidth=document.getElementById(id).contentWindow.document .body.scrollWidth;
}

document.getElementById(id).height= (newheight) + "px";
document.getElementById(id).width= (newwidth) + "px";    }

<iframe src="https://like-coppers.de/kundenbereich/" scrolling="no" border="none" width="100%" height="100%" name="CHANGETHIS" id="CHANGETHIS" marginheight="0" frameborder="0" onload="autoResize('CHANGETHIS');" onresize="autoResize('CHANGETHIS');"></iframe>

在 chrome 上完美运行（忽略边框）：但在 Firefox 上它被切断了：

你知道解决办法吗？

【问题讨论】：

在 Firefox 中，您需要查询 documentElement.scrollHeight 而不是 body.scrollHeight
@CBroe 完美运行！！！非常感谢。
你能把它作为答案提交给我吗？

标签： javascript css firefox iframe

【解决方案1】：

在 Firefox 中，您需要查询 documentElement.scrollHeight 而不是 body.scrollHeight

自动选择正确属性的方法见
.body.scrollHeight doesn't work in Firefox或
document.body.scrollHeight yielding two different results in firefox/chrome

【讨论】：

它现在在 Firefox 中工作，但在 chrome 中它不再调整大小：imgur.com/a/lhXSY 我将 body.scrollHeight 更改为 documentEelment.scrollHeight
您需要同时考虑这两个值；检查我链接到的其他问题，他们有示例如何做到这一点。

【解决方案2】：

你必须使用内联样式来解决这个问题 style="overflow:hidden;min-height:600px;width:100%"

所以你的 iframe 看起来像

<iframe src="https://like-coppers.de/kundenbereich/" style="overflow:hidden;height:100%;width:100%" scrolling="no" border="none" width="100%" height="100%" name="CHANGETHIS" id="CHANGETHIS" marginheight="0" frameborder="0" onload="autoResize('CHANGETHIS');" onresize="autoResize('CHANGETHIS');" ></iframe>

希望对你有帮助

【讨论】：