iframe根据内容高度自适应：亲测有效

hezebin

于 2019-07-29 17:19:57 发布

阅读量2.1k

点赞数

分类专栏：日常问题解决记录文章标签： iframe根据内容高度自适应 iframe高度自适应

日常问题解决记录专栏收录该内容

11 篇文章

订阅专栏

本文提供了一种解决Iframe加载后无法自适应高度的问题，包括两种方法：一是通过子页面加载完毕时调整高度；二是利用主页面frame的onLoad事件进行自适应。并提供了响应式布局下，窗口尺寸变化时继续自适应的JQuery实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

网上的诸多方法，均无效，这个是我亲测可用的！

方法一：

在子页面加载完毕的时候执行

parent.document.getElementById("iframe").height=0;
parent.document.getElementById("iframe").height=document.body.scrollHeight;

方法二：

在主页面frame的onLoad时间里面写

function iframeLoad()
{
	document.getElementById("iframe").height=0;
	document.getElementById("iframe").height=document.getElementById("iframe").contentWindow.document.body.scrollHeight;
}

补充：

响应式布局中改变浏览器大小时部分内容会被挤到新的一行，由于iframe加载时高度固定，被挤到下面的部分内容就会被隐藏掉，所以需要响应事件继续自适应，JQuery实现：

//窗体尺寸变化时继续自适应
$(window).resize(function () {
	iframeLoad();
})

文章转载于：https://blog.youkuaiyun.com/ye987987/article/details/51832066