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

最新推荐文章于 2022-05-25 14:09:35 发布

原创最新推荐文章于 2022-05-25 14:09:35 发布 · 9.9k 阅读

11 ·

CC 4.0 BY-SA版权

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

页面布局使用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>