如何设置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>

当我尝试使用下面的函数时，它没有返回正确的高度。（它返回2000像素，但我的iframe高度接近3000像素）

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

- hellzone

---

这一行没有任何作用: this.contentWindow.document.body.offsetHeight + 'px'; 尝试使用height="2000px"。也许overflow:hidden会使内容iframe的px不可见。 - Nikola Lukic

Answer 1

您可以使用

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

or

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

- Super User

---

已经说过这段代码无法返回Iframe的内容高度。 - hellzone

@hellzone 如果你在 settimeout 函数中调用它，它肯定会起作用。 - Super User

仍然无法工作。它仍然返回我的自定义Iframe高度（2000px），而不是Iframe内容的高度。 - hellzone

如果iframe的高度设置为“2000px”，而内容仅需要“400px”，则scrollHeight将返回“2000px”。即，如果当前高度大于内容高度，scrollHeight将返回当前高度。为了避免这种情况，将iframe的高度暂时设置为“1px”；然后，scrollHeight将返回内容高度。 - nitsas

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

- Panama Prophet

---

它不起作用。$(window).height() 返回我的自定义Iframe高度，即2000像素，但我仍然可以看到Iframe滚动条。 - hellzone

你是想在iframe内部还是外部使用这段代码？ - Panama Prophet

$(window).height() 返回视口的高度，所以我理解你的问题是你需要将 iframe 的大小调整为父视口的大小。 - Panama Prophet

我有一个Iframe，想要在其中展示一个网站。该网站高度为3000像素。我的目标是在Iframe中展示该网站，但不显示滚动条。 - hellzone

好的，似乎您需要调整iframe的大小以适应其内容。这个问题在此解释 - https://dev59.com/6XRA5IYBdhLWcg3wzhRY - Panama Prophet