iframe 自适应高度 IE Firefox 通过

1、Iframe 自适应高度的含义:
主页面DIV里包括一个iframe,div的高度要根据iframe的实际高度自动变化,以免出现Iframe所包括内容的溢出问题.

2、解决办法:
原来的思路是想获得iframe的实际高度,根据这个高度来设置Div的高度。
<iframe marginwidth=0 marginheight=0 SRC="UserBase.html" width="100%"  height="100%"  id="IframeUser" name="IframeUserName"    frameborder="0"   scrolling="no" onload="this.height=IframeUserName.document.body.scrollHeight;SetDivHeight(usermainName.document.body.scrollHeight);"></iframe>

这里的IframeUserName.document.body.scrollHeight在ie里是没有问题的,但在firefox 里却却出现问题,当iframe 的src变化的时候,获得的高度不会随着src实际高度而变化.

所以只能在src里下功夫了,在src里获得实际高度,然后去修改包含Iframe的的DIV的高度(后来验证,只要设置了iframe的style.height就可以了,不需要设置div的高度了)。建立一个公共的JS文件,在每个scr里包含该JS文件。JS内容如下:

/*
设置根据Iframe指定的文件的内容的高度(内容由一个ID为FrameSrc的div包含起来),来设置包含Iframe的Div的高度.
*/

var  height  =  document.all.FrameSrc.scrollHeight;
if (height < 300 ) height  =   300 ;
window.parent.document.getElementById(
" IframeUser " ).style.height = height; 


FrameSrc 是SCR里的DIV的ID。
if(height<300) height = 300 表示当scr高度小于300px的时候div的高度置为300px

虽然有点麻烦,但终归实现功能了。

主页面:

< div  class ="MainRightChild" >
        
< iframe  marginwidth =0  marginheight =0  src ="UserBase.html"  width ="100%"   height ="100%"   id ="IframeUser"  name ="IframeUserName"     frameborder ="0"    scrolling ="no" ></ iframe >  
        
</ div >


下面是scr的样例文件:

< div  id ="FrameSrc" >
< table  class ="List" >
< tr >  
  
< td  width ="10%" > 辖区 </ td >
  
< td  width ="45%"  class ="Title" > 名称 </ td >
 
  
< td  width ="20%" > 创建人 </ td >
  
< td  width ="15%" > 成员数 </ td >
  
< td  width ="10%"   > 活动次数 </ td >
</ tr >
< tr >  
  
< td  > [上海] </ td >
  
< td >   < href ="../Group/GroupDetail.html"  target ="_blank"  title ="左边固定宽度" > 左边固定宽度 </ a ></ td >
  
< td  >< href ="../Group/GroupDetail.html"  target ="_blank"  title ="左边固定宽度" >< href ="../User/UserDetail.html"  target ="_blank"  title =" " > 张三 </ a >   < href ="../User/UserDetail.html"  target ="_blank"  title ="" > 张三2 </ a ></ a ></ td >
  
< td  > 33人 </ td >
  
< td  >< href ="../Group/GroupDetail.html"  target ="_blank"  title ="左边固定宽度" > 31次 </ a ></ td >
</ tr >

</ table >    
</ div >   
< script  src ="../App_Themes/Script/IframeSrc.js"  charset ="UTF-8"   type ="text/javascript" ></ script >


欢迎大家提出意见!

修正:"后来验证,只要设置了iframe的style.height就可以了,不需要设置div的高度了"
这个说法有问题:IE里一行两个DIV a 和 b,b里有一个iframe,如果设置了iframe的高度,那么a的高度也将是这个高度,如果a里的内容的高度超过这个高度,将会Hidden.这中情况下需要设置b的高度来代替设置iframe的高度,这样不会影响a的高度了所以必须要设置DIV的高度:

var  height  =  document.all.FrameSrc.scrollHeight;
if (height < 300 ) height  =   300 ;
window.parent.document.getElementById(
" MainRightChild " ).style.height = height; 

< div  class ="MainRightChild" id="MainRightChild" >
        
< iframe  marginwidth =0  marginheight =0  src ="UserBase.html"  width ="100%"   height ="100%"   id ="IframeUser"  name ="IframeUserName"     frameborder ="0"    scrolling ="no" ></ iframe >  
        
</ div >

你可能感兴趣的:(firefox)