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

时间:2017-01-13 08:32:53

标签: javascript jquery html iframe

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

有没有办法删除滚动条并适合iframe内容?

getItem

当我尝试以下功能时,它不会返回正确的高度。 (它返回2000px,但我的Iframe高度接近3000px)

<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>

2 个答案:

答案 0 :(得分:2)

您可以使用

$('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);
})

答案 1 :(得分:0)

使用此参数删除边框和滚动条

scrolling="no"
frameborder="no"

此代码用于设置iframe高度

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

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

如果您需要动态更改高度以适应窗口大小,请将上面的代码包装到函数中并在resize上的window事件中使用它,同时调用文档{{1}像这样的事件:

ready

<强> 已更新

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

function iframeResize(){

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

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

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