如何设置 iframe 高度以适应内容？

Question

我正在尝试从 iframe 中删除滚动条。当我手动设置 iframe 的高度时，它可以工作，但 iframe 的大小可以改变，我不知道如何在页面加载时获取 iframe 的高度。

有什么方法可以移除滚动条并适合 Iframe 内容？

<div class="portlet" id="pageContainer">
    <iframe id="frame" width="100%" frameborder="0" height="2000" scrolling="false" allowfullscreen="" src="/app/mytestapp" style="overflow: hidden"></iframe>
</div>

当我尝试低于功能时，它不会返回正确的高度。 （它返回 2000px 但我的 iframe 高度接近 3000px）

$('iframe').load(function() {        
    this.contentWindow.document.body.offsetHeight + 'px';
});

Answer 1

你可以使用

$('iframe').load(function() {
    $('#frame').height($('#frame').get(0).contentWindow.document.body.offsetHeight + 'px');
})

或

$('iframe').load(function() {
    setTimeout(function(){
        $('#frame').height($('#frame').get(0).contentWindow.document.body.offsetHeight + 'px');
    }, 3000);
})

Answer 2

使用该参数去除边框和滚动条

scrolling="no"
frameborder="no"

这个设置 iframe 高度的代码

var width = $(window).width()
var height = $(window).height()

$('#frame').css({ width : width, height : height })

如果您需要动态更改高度以适应窗口大小，请将上面的代码包装到函数中并在window 的resize 事件上使用它，也可以像这样调用文档的ready 事件：

function iframeResize(){

    var width = $(window).width()
    var height = $(window).height()

    $('#frame').css({ width : width, height : height })
}

$(window).on('resize', iframeResize)
$(document).on('ready', iframeResize)

---

更新

您还需要在 iframe 的父页面上进行边距和填充。 默认值会导致父页面的滚动条。如果您不需要在页面上携带除 iframe 之外的其他元素，那么这样的方法将是一个简单的解决方案。

* {
    margin: 0;
    padding: 0;
}