让网页框架自适应高度(根据内容自动适应)

 
正文:

通过以下的代码就可以轻松实现框架自适应高度。

 

以下是引用片段:
<script type="text/javascript">    
//** iframe自动适应页面 **//    
   
//输入你希望根据页面高度自动调整高度的iframe的名称的列表    
//用逗号把每个iframe的ID分隔. 例如: ["myframe1", "myframe2"],可以只有一个窗体,则不用逗号。    
   
//定义iframe的ID    
var iframeids=["alixixi.com"]    
   
//如果用户的浏览器不支持iframe是否将iframe隐藏 yes 表示隐藏,no表示不隐藏    
var iframehide="yes"   
   
function dyniframesize()     
{    
var dyniframe=new Array()    
for (i=0; i<iframeids.length; i++)    
{    
if (document.getElementById)    
{    
//自动调整iframe高度    
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) //如果用户的浏览器是NetScape    
dyniframe[i].height = dyniframe[i].contentDocument.body.offsetHeight;     
else if (dyniframe[i].Document && dyniframe[i].Document.body.scrollHeight) //如果用户的浏览器是IE    
dyniframe[i].height = dyniframe[i].Document.body.scrollHeight;    
}    
}    
//根据设定的参数来处理不支持iframe的浏览器的显示问题    
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.οnlοad=dyniframesize    
</script>  

 

但在一次实际应用中,该代码写在了带有框架的页面上,页面加载时,框架是可以自动适应初始大小了。

但是如果改变框架里的内容后,框架还是不会自适应高度,那么,该如何解决这个问题呢。

在框架页面,比如:http://www.alixixi.com/down/index.html的最底部插入一行代码,就可以实现了,代码如下:

<script>parent.dyniframesize();</script>

意思就是在框架页重新加载时,就刷新运行一下父页的JS函数来调整框架高度,这样就可以实现自适应了

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值