当前位置: 首页>html>iframe>动态的改变IFrame的高度

动态的改变IFrame的高度

时间:2015-06-09 18:18 来源:网络整理 作者:KKWL 点击:
> web前端 > HTML 5 > 正文动态的改变IFrame的高度2012-12-27 作者:software0116 我要投稿[html] 动态的改变IFrame的高度,实现IFrame自动伸展,父页面也自动神缩 原理: 在IFrame子页面一加载的时候

> web前端 > HTML 5 > 正文 动态的改变IFrame的高度 2012-12-27            作者:software0116    我要投稿 [html]  

动态的改变IFrame的高度,实现IFrame自动伸展,父页面也自动神缩  

原理: 在IFrame子页面一加载的时候,调用父IFrame对象,改变其高度  

  

具体实现:  

  

1、在IFrame的具体页面(就是子页面),添加JavaScript  

<script>  

function IFrameResize(){  

  

 //alert(this.document.body.scrollHeight); //弹出当前页面的高度  

 var obj = parent.document.getElementById("childFrame");  //取得父页面IFrame对象  

 //alert(obj.height); //弹出父页面中IFrame中设置的高度  

 obj.height = this.document.body.scrollHeight;  //调整父页面中IFrame的高度为此页面的高度  

  

}  

</script>  

  

  

2、在IFrame的具体页面(就是子页面)的body中,添加onload事件  

<body onload="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>   

 

点击复制链接 与好友分享!回本站首页 您对本文章有什么意见或着疑问吗?请到论坛讨论您的关注和建议是我们前行的参考和动力   上一篇:HTML5 Web Workers 下一篇:flex 多 State(场景)下组件不能访问的解决方案 相关文章

动态添加表单元素 经典代码

图文推荐

顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
推荐内容