jquery 实现iframe高度自适应

最新推荐文章于 2021-06-03 16:40:48 发布

原创最新推荐文章于 2021-06-03 16:40:48 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

web开发专栏收录该内容

45 篇文章

订阅专栏

本文介绍了一种解决iframe内页面高度自适应问题的方法。通过使用jQuery动态调整iframe的高度以匹配其内部内容的实际高度，避免了固定高度带来的显示不全或空白过多的问题。

今天碰到一个问题，页面中使用了iframe，开始的时候设置了高度为100%，发现高度老是很高，不受控制，于是改成了height:auto（注：因为height：100%是全局设置的，其它地方要使用，所以这里用height:auto覆盖掉），结果高度又变得很小，总是不能完全适应iframe里面内容的高度，后来查了些资料发现，只能动态设置才能达到效果，于是在jsp里面增加了如下js代码：

j$("#frmReport").load(function(){
					var thisheight = j$("#frmReport").contents().find("body").height()+30;
					j$("#frmReport").height(thisheight);
				});