获取Iframe页面高度，并将高度赋值给Iframe

最新推荐文章于 2025-05-18 13:16:54 发布

小施_za

最新推荐文章于 2025-05-18 13:16:54 发布

阅读量9.8k

点赞数 2

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/kong_21/article/details/78522353

本文介绍了一种使用iframe嵌套页面并使iframe高度根据其内容自动调整的方法。通过JavaScript动态设置iframe的高度，确保了良好的视觉效果。

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

页面布局使用iframe嵌套，iframe设置高度根据页面内容的高度自适应。代码如下（设置父级页面）：

HTML部分：

<iframe name="container_ifranme" id="iframeId" scrolling="no" frameborder="no" border="0" src="home.html" onLoad="iFrameHeight()" ></iframe>

JS部分：

<script>
	//获取iframe子页面内容高度给iframe动态设置高度
	function iFrameHeight() {
	var ifm= document.getElementById("iframeId");
		var subWeb = document.frames ? document.frames["iframeId"].document : ifm.contentDocument;
		if(ifm != null && subWeb != null) {
			ifm.style.height = 'auto';//关键这一句，先取消掉之前iframe设置的高度
			ifm.style.height = subWeb.body.scrollHeight+'px';
		}
	};
</script>