使 iframe 占用垂直空间答案

【问题标题】：Making an iframe take vertical space使 iframe 占用垂直空间
【发布时间】：2010-09-07 06:32:28
【问题描述】：

我想让iframe 占用尽可能多的垂直空间来显示其内容而不显示滚动条。有可能吗？

有什么解决方法吗？

【问题讨论】：

【解决方案1】：

这个 CSS sn-p 应该移除垂直滚动条：

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

我还不确定是否让它占用所需的垂直空间，但我会看看我是否无法弄清楚。

【讨论】：

【解决方案2】：

这应该将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。

【讨论】：

非常方便，干杯。可能值得一提的是，如果 iframe 由于相同的来源策略而位于不同的域中，这将不会那么好

【解决方案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>

【讨论】：

【解决方案4】：

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

【讨论】：

这并不总是可行的，除非您要构建一个自定义代理服务器来重写 html 正文中的链接......这是一个笑话。

【解决方案5】：

还可以查看此线程：How does the DiggBar dynamically resize its iframe's height based on content not on their domain?。

它解决了同样的问题。

【讨论】：