javascript动态的改变IFrame的高度实现自动伸展_如何实现elementui弹窗拉伸,iframe界面的高度也随之变化-CSDN博客

动态的改变IFrame的高度，实现IFrame自动伸展，父页面也自动神缩，实现原理很简单就是在IFrame子页面一加载的时候，调用父IFrame对象，改变其高度，感兴趣的朋友可以了解下

动态的改变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事件

复制代码代码如下:

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{  www.jbxue.com 
 
 window.parent.document.getElementById("mainFrame").height=winH;  
 
 }  
 
 });

父页面的iframe为

复制代码代码如下:

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