javascript - 使 iframe 占用垂直空间

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

在iframe我添加DOCTYPE.

FF/IE/Chrome 支持：.scrollHeight 不适用于 Chrome，所以我想出了一个 javascript 示例，使用 jQueryIFRAME根据 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

另请查看此线程：DiggBar 如何根据不在其域中的内容动态调整其 iframe 的高度？.

它解决了同样的问题。