Question

使用可以通过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>

的Javascript

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的内容是动态生成的，因此高度会有很大变化，因此效果不佳

我在ifss的css中放了'display：block'和'height：auto'，因为我在其他讨论中看到了一些建议，这些规则可以帮助解决这个问题，但他们什么也没做。

此问题适用于所有浏览器，但在Chrome和Safari中比在Firefox中更具戏剧性（因为webkit通常会测量高于Mozilla的高度）。

有谁知道造成这种情况的原因和/或如何修复它？

Answer 1

所以我明白了。我在JavaScript中将iframe的宽度设置为100％，但是只有在获得元素高度之后，我才会意识到当检索到这些高度时，它们是从具有水平滚动条的元素中检索到的，以及额外高度来自哪里。在CSS而不是JS中将iframe的宽度设置为100％解决了问题。

它始终是如此明显的东西，让你在墙上敲打几个小时。

iFrame错误地报告内部元素高度

1 个答案: