Question

我希望iframe占用尽可能多的垂直空间，以显示其内容而不显示滚动条。它有可能吗？

有没有解决方法？

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>

您可能需要将scrolling="no"添加到IFRAME以关闭滚动条。

编辑：哎呀，忘了宣布the_height。

Answer 2

此CSS代码段应删除垂直滚动条：

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

我不确定它是否需要占用尽可能多的垂直空间，但我会看到我是否无法理解它。

Answer 3

在DOCTYPE源文档中添加IFRAME声明将有助于从行计算正确的值

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

请参阅W3C DOCTYPE for examples

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

FF / IE / Chrome支持：.scrollHeight无法与Chrome配合使用，因此我想出了一个javascript示例，使用jQuery根据iframe内容设置页面上的所有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>

Answer 4

解决方法是不在服务器端使用<iframe>和预处理代码。

Answer 5

同时查看此主题：How does the DiggBar dynamically resize its iframe's height based on content not on their domain?。

它解决了同样的问题。

制作iframe占用垂直空间

5 个答案: