IFrame里面的子页面html内容变化时，动态改变IFrame的高度

最新推荐文章于 2022-11-14 11:08:49 发布

mtqdm

最新推荐文章于 2022-11-14 11:08:49 发布

阅读量292

点赞数

分类专栏：前端文章标签： javascript html

本文链接：https://blog.csdn.net/mtqdm/article/details/105576463

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1、在IFrame的具体页面(就是子页面)，添加JavaScript
<script>
function IFrameResize(){

//alert(this.document.body.scrollHeight); //弹出当前页面的高度
var obj = parent.document.getElementById("childFrame"); //取得父页面IFrame对象
//alert(obj.height); //弹出父页面中7a64e59b9ee7ad9431333337613831IFrame中设置的高度
obj.height = this.document.body.scrollHeight; //调整父页面中IFrame的高度为此页面的高度

//obj.height = document.getElementById("tabl").offsetHeight;//获取body高度不准确就用table高度
}
</script>

2、在IFrame的具体页面(就是子页面)的body中，添加onload事件
<body οnlοad="IFrameResize()">

3、为父页面的IFrame标签添加ID，即上面第一步，方法体中的第2行所写到的childFrame
<IFRAME border=0 marginWidth=0
frameSpacing=0 marginHeight=0
src="frame1.jsp" frameBorder=0
noResize scrolling="no" width=100% height=100% vspale="0" id="childFrame"></IFRAME>

注：若是通过异步请求抓取的数据，在onload事件里调用设置iframe高度的方法是不准确的，因为此时ajax还没有完全把数据追加到页面。所以要在回调函数里调用重设iframe高度的方法。

mtqdm

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
IFrame里面的子页面html内容变化时，动态改变IFrame的高度

1、在IFrame的具体页面(就是子页面)，添加JavaScript<script>function IFrameResize(){//alert(this.document.body.scrollHeight); //弹出当前页面的高度var obj = parent.document.getElementById("childFrame"); //取得父页面IFrame对象...
复制链接

扫一扫

专栏目录