如何实现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 相关文章推荐
从javascript语言本身谈项目实战
Dec 27 Javascript
一个报数游戏js版(约瑟夫环问题)
Aug 05 Javascript
jquery post方式传递多个参数值后台以数组的方式进行接收
Jan 11 Javascript
『jQuery』取指定url格式及分割函数应用
Apr 22 Javascript
jquery 扑捉回车键事件代码
Apr 24 Javascript
JavaScript数组的一些奇葩行为
Jan 25 Javascript
Angular2实现自定义双向绑定属性
Mar 22 Javascript
VueJS 集成 Medium Editor的示例代码 (自定义编辑器按钮)
Aug 24 Javascript
Js中将Long转换成日期格式的实现方法
Jun 05 Javascript
JavaScript设计模式之代理模式实例分析
Jan 16 Javascript
CountUp.js实现数字滚动增值效果
Oct 17 Javascript
vue单元格多列合并的实现
Nov 26 Vue.js
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
DC《神奇女侠2》因疫情推迟上映 温子仁新恐怖片《恶性》撤档
2020/04/09 欧美动漫
php删除文件夹及其文件夹下所有文件的函数代码
2013/01/23 PHP
destoon官方标签大全
2014/06/20 PHP
ThinkPHP结合ajax、Mysql实现的客户端通信功能代码示例
2014/06/23 PHP
php为字符串前后添加指定数量字符的方法
2015/05/04 PHP
PHP使用Redis长连接的方法详解
2018/02/12 PHP
php简单计算权重的方法示例【适合抽奖类应用】
2019/06/10 PHP
js或css实现滚动广告的几种方案
2010/01/28 Javascript
js判断页面中是否有指定控件的简单实例
2014/03/04 Javascript
JS实现让访问者自助选择网页文字颜色的方法
2015/02/24 Javascript
基于jQuery实现仿淘宝套餐选择插件
2015/03/04 Javascript
jQuery实现的类似淘宝网站搜索框样式代码分享
2015/08/24 Javascript
jquery图片滚动放大代码分享(2)
2015/08/28 Javascript
Jquery ajax基础教程
2015/11/20 Javascript
Node.js的Express框架使用上手指南
2016/03/12 Javascript
JS如何判断json是否为空
2016/07/06 Javascript
JavaScript随机生成颜色的方法
2016/10/15 Javascript
d3.js实现简单的网络拓扑图实例代码
2016/11/06 Javascript
JavaScript实现多重继承的方法分析
2018/01/09 Javascript
JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
2018/01/23 Javascript
说说Vue.js中的functional函数化组件的使用
2019/02/12 Javascript
深入浅析vue-cli@3.0 使用及配置说明
2019/05/08 Javascript
微信公众号平台接口开发 获取access_token过程解析
2019/08/14 Javascript
微信小程序实现限制用户转发功能的实例代码
2020/02/22 Javascript
vue实现导航标题栏随页面滚动渐隐渐显效果
2020/03/12 Javascript
Nodejs文件上传、监听上传进度的代码
2020/03/27 NodeJs
python读取csv和txt数据转换成向量的实例
2019/02/12 Python
pytorch制作自己的LMDB数据操作示例
2019/12/18 Python
flask 实现上传图片并缩放作为头像的例子
2020/01/09 Python
六月份红领巾广播稿
2014/02/03 职场文书
运动会横幅标语
2014/06/17 职场文书
人大调研汇报材料
2014/08/14 职场文书
2014年学校体育工作总结
2014/12/08 职场文书
机关工会工作总结2015
2015/05/26 职场文书
2015年教师节广播稿
2015/08/19 职场文书
mysql如何查询连续记录
2022/05/11 MySQL