iFrame 错误地报告内部元素高度
Posted
技术标签:
【中文标题】iFrame 错误地报告内部元素高度【英文标题】：iFrame reporting interior element heights incorrectly 【发布时间】：2018-05-30 08:31:59 【问题描述】：使用可以通过 Google 轻松找到的众多示例中的一些示例，我编写了代码来调整 iframe 的大小以适应其内容（通过 php 动态生成）。它有效，但有一个问题，尽管进行了多次搜索，但我无法找到解决方案。首先，这是相关的代码：
主 html
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src=(JQuery URL)></script>
<script src=(External JS file URL, code detailed below)></script>
</head>
<body>
<div id="container">
<iframe id="iframe" src=(url of source file) onload="resize()"></iframe>
</div>
</body>
</html>
iFrame 源 HTML
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="innerFrameDivs">
<?php (dynamically generated content) ?>
</div>
<div class="innerFrameDivs">
<?php (dynamically generated content) ?>
</div>
</body>
</html>
function resize()
var iframe = document.getElementById("iframe");
var contentHeight = iframe.contentDocument.body.scrollHeight;
$('#iframe').css('height',contentHeight);
CSS
#iframe
display:block;
border:none;
height:auto;
因此，iframe 会调整大小以适应其内容，但会在其内容下方留下一大块空白空间。
我发现这是因为 iframe 报告的 scrollHeight 大于其内容的实际高度，当然，如果您将元素的高度设置为大于内部的高度，则将是空的底部的空间。
我进一步调查并发现 iframe 报告的元素的实际单个高度也比它们实际的大。也就是说，我在带有iframe的页面上运行了这个JS：
$('#iframe').contents().find('.innerFrameDivs').each(function()
var height = $(this).css('height');
alert(height);
);
并且 iframe 源页面上的这个 JS 在它自己的浏览器选项卡中本地打开：
$(document).find('.innerFrameDivs').each(function()
var height = $(this).css('height');
alert(height);
);
尽管元素相同，但 css 相同，但报告的高度不同。例如，在一个实例中，iframe 报告顶部 div 的高度为 241，底部 div 的高度为 901，而 iframe 源页面在浏览器选项卡中本地打开时报告顶部 div 的高度为 207，底部 div 的高度为 785 .
因此，出于某种原因，iframe 正在夸大其内部元素的高度，从而夸大其 scrollHeight，我不知道为什么。我想只取scrollHeight的一个百分比，比如90%，并将其用作iframe高度，但由于内部div的内容是动态生成的，高度会有很大变化，所以效果不太好.
我将 'display:block' 和 'height:auto' 放在 iframe 的 css 中，因为我在此处的其他讨论中看到了一些建议，这些规则可以帮助处理此问题，但它们什么也没做。
这个问题存在于所有浏览器中，尽管它在 Chrome 和 Safari 中比在 Firefox 中更为严重（因为 webkit 通常测量的高度比 Mozilla 大）。
有谁知道是什么原因造成的和/或如何解决它？
【问题讨论】：
在多个时刻测量高度并比较结果可能会有所帮助。在window.load 上的setTimeout 内运行您的代码，您可能会获得更准确的结果，而不会出现任何设置延迟。这可确保您的代码在绑定在window.load 上的所有其他内容都已执行后执行，从而大大增加您获得准确高度的机会。我假设您知道您正在处理两个文档，每个文档都有自己特定的window.load 事件。 Afaik，iframe 的 load 首先触发（因为主文档正在等待它自己触发）。
欣赏这个建议，但尝试这个并没有改变任何东西。不过我想通了——它是添加了水平滚动条高度。
【参考方案1】：
所以我想通了。我一直在 JavaScript 中将 iframe 的宽度设置为 100%，但只是在获取元素高度之后，所以我没有意识到当检索这些高度时，它们是从具有水平滚动条的元素中检索的，这就是额外的高度来自。在 CSS 而不是 JS 中将 iframe 的宽度设置为 100% 解决了这个问题。
总是很明显的事情让你在墙上撞了好几个小时。
【讨论】：
以上是关于iFrame 错误地报告内部元素高度的主要内容，如果未能解决你的问题，请参考以下文章
js获取iframe和父级之间元素，方法属，获取iframe的高度自适应iframe高度