使 iframe 占据垂直空间

Question

我希望一个iframe能够占据其需要的垂直空间来显示内容，而不显示滚动条。是否有可能做到？

有没有任何解决方法？

- Beriadan

Answer 1

这应该将 IFRAME 的高度设置为其内容的高度：

<script type="text/javascript">
the_height = document.getElementById('the_iframe').contentWindow.document.body.scrollHeight;
document.getElementById('the_iframe').height = the_height;
</script>

您可能想要在您的IFRAME中添加scrolling="no"来关闭滚动条。

编辑：糟糕，忘记声明the_height了。

- ceejayoz

---

非常方便，感谢。可能值得一提的是，如果iframe位于不同的域，由于同源策略的限制，这种方法可能无法很好地运行。 - ConroyP

Answer 2

向 IFRAME 源文件添加 DOCTYPE 声明将有助于从该行中计算出正确的值。

document.getElementById('the_iframe').contentWindow.document.body.scrollHeight

查看W3C DOCTYPE示例

我在使用iframe文档时遇到了IE和FF的问题，因为它们以“quirks”模式呈现，直到我添加了DOCTYPE。

FF/IE/Chrome支持：由于Chrome不支持.scrollHeight，所以我想出了一个使用jQuery的javascript示例，根据iframes内容设置页面上所有IFRAME的高度。注意：这仅适用于当前域内的参考页面。

<script type="text/javascript">
    $(document).ready(function(){
        $('iframe').each(function(){
            var context = $(this);
            context.load(function(event){ // attach the onload event to the iframe  
                var body = $(this.contentWindow.document).find('body');
                if (body.length > 0 && $(body).find('*').length > 0) { // check if iframe has contents
                    context.height($(body.get(0)).height() + 20);
                } else {
                    context.hide(); // hide iframes with no contents
                }
            });
        });
    });
</script>

- Adam

Answer 3

还可以查看这个帖子： DiggBar如何根据内容而不是域名动态调整其iframe的高度？。

它解决了同样的问题。

- New Coder

Answer 4

绕过方法是不使用<iframe>并在服务器端对代码进行预处理。

- porneL

---

这并非总是可行，除非你打算构建一个自定义代理服务器来重写HTML正文中的链接... 这简直是个笑话。 - ErikE

Answer 5

这个 CSS 代码片段可以去掉垂直滚动条：

body {
  overflow-x: hidden;
  overflow-y: hidden;
} 

我还不确定它是否需要占用尽可能多的垂直空间，但我会尽力弄清楚。

- Daniel Jennings