如何实现iframe(嵌入式帧)的自适应高度


Posted in Javascript onJuly 26, 2006

好几次看到有人提问问到如何实现 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>里面就可以了

Javascript 相关文章推荐
php gethostbyname获取域名ip地址函数详解
Jan 24 Javascript
纯JS实现根据CSS的class选择DOM
Mar 22 Javascript
jquery解析xml字符串示例分享
Mar 25 Javascript
浅析JavaScript中break、continue和return的区别
Nov 30 Javascript
深入理解JavaScript创建对象的多种方式以及优缺点
Jun 01 Javascript
zTree树形菜单交互选项卡效果的实现方法
Dec 25 Javascript
Angular 数据请求的实现方法
May 07 Javascript
Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖
Nov 25 Javascript
vue如何截取字符串
May 06 Javascript
Vue项目中使用WebUploader实现文件上传的方法
Jul 21 Javascript
vue2 拖动排序 vuedraggable组件的实现
Aug 08 Javascript
深入理解webpack process.env.NODE_ENV配置
Feb 23 Javascript
CSS+JS构建的图片查看器
Jul 22 #Javascript
常用参考资料(手册)下载或者链接
Jul 22 #Javascript
JavaScript窗口功能指南之在窗口中书写内容
Jul 21 #Javascript
用于table内容排序
Jul 21 #Javascript
脚本收藏iframe
Jul 21 #Javascript
document.all还是document.getElementsByName?
Jul 21 #Javascript
关于IFRAME 自适应高度的研究
Jul 20 #Javascript
You might like
关于初学PHP时的知识积累总结
2013/06/07 PHP
php比较相似字符串的方法
2015/06/05 PHP
PHP的几个常用加密函数
2016/02/03 PHP
php多进程应用场景实例详解
2019/07/22 PHP
javascript instanceof 与typeof使用说明
2010/01/11 Javascript
元素的内联事件处理函数的特殊作用域在各浏览器中存在差异
2011/01/12 Javascript
iframe异步加载实现点击左边菜单加载右边内容实例讲解
2013/03/04 Javascript
jQuery实现炫酷的鼠标轨迹特效
2015/02/01 Javascript
javascript判断css3动画结束 css3动画结束的回调函数
2015/03/10 Javascript
JavaScript基本语法讲解
2015/06/03 Javascript
jQuery实现下拉框功能实例代码
2016/05/06 Javascript
js实现表单及时验证功能 用户信息立即验证
2016/09/13 Javascript
bootstrap treeview 树形菜单带复选框及级联选择功能
2018/06/08 Javascript
[02:40]DOTA2英雄基础教程 巨牙海民
2013/12/23 DOTA
[05:34]2014DOTA2国际邀请赛中国区预选赛精彩TOPPLAY第二弹
2014/06/25 DOTA
[00:39]DOTA2上海特级锦标赛 Liquid战队宣传片
2016/03/04 DOTA
跟老齐学Python之不要红头文件(2)
2014/09/28 Python
Windows下PyMongo下载及安装教程
2015/04/27 Python
Python中的filter()函数的用法
2015/04/27 Python
在 Python 应用中使用 MongoDB的方法
2017/01/05 Python
python判断一个集合是否为另一个集合的子集方法
2018/05/04 Python
网易有道2017内推编程题 洗牌(python)
2019/06/19 Python
python中对数据进行各种排序的方法
2019/07/02 Python
python requests库爬取豆瓣电视剧数据并保存到本地详解
2019/08/10 Python
Python通过TensorFLow进行线性模型训练原理与实现方法详解
2020/01/15 Python
python中PyQuery库用法分享
2021/01/15 Python
英国最大的在线运动补充剂商店:Discount Supplements
2017/06/03 全球购物
如何从一个文件档案的尾端新增记录
2016/12/02 面试题
交通专业个人自荐信格式
2013/09/23 职场文书
2014年元旦活动方案
2014/02/15 职场文书
美丽乡村建设实施方案
2014/03/23 职场文书
导游词格式
2015/02/13 职场文书
2016党员党课心得体会
2016/01/07 职场文书
小学2016年“我们的节日·重阳节”活动总结
2016/04/01 职场文书
适合青年人白手起家的创业项目分享
2019/08/16 职场文书
Python制作春联的示例代码
2022/01/22 Python