iframe报告内部元素高度错误

使用可以通过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 source 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报告的卷轴大于其内容的高度，当然，如果您将元素的高度设置为比内部更大的东西，那将会有空的底部的空间。

我进一步调查了，发现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源页面报告了Top Div的高度为207，而底部Div的高度为785。

因此，出于某种原因，iframe正在膨胀其内部元素的高度，因此是其卷轴的高度，我不知道为什么。我想到只服用一定比例的卷轴，说90％，然后将其用作iframe高度，但是由于内部divs的内容是动态生成的，因此高度会发生巨大变化，因此工作不太好。。

我在iframe的CSS中放了"显示：块"one_answers"高度：自动"，因为我在这里的其他讨论中看到了一些建议，这些规则可以帮助解决这个问题，但它们什么也没做。

此问题在所有浏览器中，尽管在Chrome和Safari中比Firefox更具戏剧性（因为Webkit通常测量比Mozilla大的高度）。

有人知道是什么原因引起的和/或如何修复它？

，所以我发现了它。我一直在JavaScript中将iFrame的宽度设置为100％，但是只有在获得元素高度之后，我才意识到，当检索到这些高度时，它们是从上面有水平滚动条的元素中检索到的，那就是它们额外的高度来自。将iframe的宽度设置为CSS中的100％，而不是JS解决了问题。

总是如此明显的事情，使您将头撞在墙上数小时。

相关内容

最新更新

热门标签：