javascript动态改变iframe大小及iframe自适应设置

2013-01-09 08:25:47 | 【

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


<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
  • 自适应


推荐资源