[转自沪江博客tangle's blog]iframe框架高度自适应的实现

解决iframe框架页面自适应高度问题代码如下,需要注意的是框架引用页面一定要设置name属性,否则会不生效
<iframe src="test.asp" width="100%" frameborder="0" scrolling="no" name="hj" id="hj"></iframe>

test.asp页面head间增加如下JS代码

<SCRIPT LANGUAGE="JavaScript">

function f_frameStyleResize(targObj){

 
var targWin = targObj.parent.document.all[targObj.name];

 
if(targWin != null) {

  
var HeightValue = targObj.document.body.scrollHeight

  
if(HeightValue < 600){HeightValue = 600

  targWin.style.pixelHeight 
= HeightValue;

 }

}

function f_iframeResize(){

 bLoadComplete 
= true; f_frameStyleResize(self);

}

var bLoadComplete = false;

window.onload 
= f_iframeResize;

</SCRIPT> 

在主页面增加如下JS代码

<script type="text/javascript">
 
var iframeids=["myblog"]
 
var iframehide="yes"
 
function dyniframesize() 
 {
  
var dyniframe=new Array()
  
for (i=0; i<iframeids.length; i++)
  {
   
if (document.getElementById)
   {
    dyniframe[dyniframe.length] 
= document.getElementById(iframeids[i]);
    
if (dyniframe[i] && !window.opera)
    {
     dyniframe[i].style.display
="block"
     
if (dyniframe[i].contentDocument && dyniframe[i].contentDocument.body.offsetHeight)
      dyniframe[i].height 
= dyniframe[i].contentDocument.body.offsetHeight; 
     
else if (dyniframe[i].Document && dyniframe[i].Document.body.scrollHeight)
      dyniframe[i].height 
= dyniframe[i].Document.body.scrollHeight;
    }
   }
   
if ((document.all || document.getElementById) && iframehide=="no")
   {
    
var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i])
    tempobj.style.display
="block"
   }
  }
 }

 
if (window.addEventListener)
 window.addEventListener(
"load", dyniframesize, false)
 
else if (window.attachEvent)
 window.attachEvent(
"onload", dyniframesize)
 
else
 window.onload
=dyniframesize

</script>


把主页面的大表格高度去掉
子页面的固定高度也去掉
posted @ 2005-06-24 07:51  深渊野鱼  阅读(508)  评论(0编辑  收藏  举报