Iframe 去掉滚动条后不会显示全部内容，实现iframe 高度随内容变化

最新推荐文章于 2025-06-18 11:55:40 发布

_文和_

最新推荐文章于 2025-06-18 11:55:40 发布

阅读量6.6k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： java jsp 文章标签： js iframe 高度自适应

本文链接：https://blog.csdn.net/qq_36978986/article/details/86490805

java 同时被 2 个专栏收录

8 篇文章

订阅专栏

jsp

3 篇文章

订阅专栏

本文介绍了一种使用JavaScript动态调整iframe高度的方法，以确保在移除滚动条后，iframe内的全部内容能够完全显示。通过监测iframe内容加载状态并获取实际宽高，实现了iframe尺寸的自动适配。

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

<iframe id="mainIframe" name="mainIframe"
	style="width: 100%;margin-top: -1%" frameborder="no"
	border="0" scrolling="no"src=""></iframe>

其中 scrolling="no" 是将滚动条去掉

但是呢，去掉滚动条后不会显示全部内容咋整。

我采用的是js 改变iframe 高度的办法

<script language="javascript">
	var timeIframe;
	window.onload = function() {
		timeIframe = setTimeout(GetIframeStatus, 10);
	}
	function GetIframeStatus() {
		var iframe = document.getElementById("mainIframe");
		var iframeWindow = iframe.contentWindow;
		//内容是否加载完
		if (iframeWindow.document.readyState == "complete") {
			var iframeWidth, iframeHeight;
			//获取Iframe的内容实际宽度
			iframeWidth = iframeWindow.document.documentElement.scrollWidth;
			//获取Iframe的内容实际高度
			iframeHeight = iframeWindow.document.documentElement.scrollHeight;
			//设置Iframe的宽度
			iframe.width = iframeWidth;
			//设置Iframe的高度
			iframe.height = iframeHeight;
		} else {
			timeIframe = setTimeout(GetIframeStatus, 10);
		}
	}
</script>

代码书写完成

同时，iframe 的父标签高度该删就删。