用户登陆:
设为首页 | 加入收藏 | 免费邮箱
建站学院: 建站心得 | 搜索优化 | 建站点子 | 网站推广 | 网站推荐 | 企业新闻 | 人物新闻 | 网媒内幕 | 域名相关 | 热门专题 | 本站作品
设计学院: 网页设计 | 平面设计 | 网络编程 | 多媒体类 | 数据库类 | 服务器类 | 操作系统 | 联盟新闻 | 联盟介绍 | 联盟点评 | 网赚技巧
模板下载: 旅游度假 | 饮食食品 | 公司展示 | 学校教育 | 文化艺术 | 金融财经 | 儿童卡通 | 体育运动 | 服饰品牌 | 爱情交友 | 游戏娱乐
您现在的位置: 星星雨设计站 >> 设计学院 >> 网页设计 >> Javascript >> 教程正文
如何实现iframe(嵌入式帧)的自适应高度
作者:佚名    教程来源:不详    点击数:    更新时间:2007-11-18

好几次看到有人提问问到如何实现 iframe 的自适应高度,能够随着页面的长度自动的适应以免除页面和 iframe 同时出现滚动条的现象,刚好我在工作中也碰到了类似问题,于是上网翻查,东抄抄西看看,弄出来这么一个函数,贴到页面里面就能用了。不敢独享,大家要是觉得有用,欢迎使用

源代码如下

<script type="text/javascript">
 //** iframe自动适应页面 **//

 //输入你希望根据页面高度自动调整高度的iframe的名称的列表
 //用逗号把每个iframe的ID分隔. 例如: ["myframe1", "myframe2"],可以只有一个窗体,则不用逗号。

 //定义iframe的ID
 var iframeids=["test"]

 //如果用户的浏览器不支持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.onload=dyniframesize
</script>


使用的时候只要贴在<head></head>里面就可以了

发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口教程录入:冰河    责任编辑:冰河 
  网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)
最新热门
最新推荐
| 设为首页 | 加入收藏 | 联系站长 | 友情链接 | 版权申明