首页 / JAVASCRIPT / 动态的改变IFrame的高度实现IFrame自动伸展适应高度

动态的改变IFrame的高度实现IFrame自动伸展适应高度

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了动态的改变IFrame的高度实现IFrame自动伸展适应高度，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1373字，纯文字阅读大概需要2分钟。

内容图文

动态的改变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> 
 
具体实现二:
 代码如下:

//动态改变父类iframe的高度 
//iframe页面调用的js 
$(function(){ 
//取到窗口的高度 
var winH = $(window).height(); 
//取到页面的高度 
var bodyH = $(document).height(); 
if(bodyH > winH){ 
window.parent.document.getElementById("mainFrame").height=bodyH; 
}else{ 
window.parent.document.getElementById("mainFrame").height=winH; 
} 
}); 
 
父页面的iframe为 
 代码如下:

<iframe src="main.action" height="700" frameborder="0" width="100%" id="mainFrame" name="mainFrame"></iframe>

内容总结

以上是互联网集市为您收集整理的动态的改变IFrame的高度实现IFrame自动伸展适应高度全部内容，希望文章能够帮你解决动态的改变IFrame的高度实现IFrame自动伸展适应高度所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/367537.html

来源：【匿名】