如何实现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实现给图片加链接
Aug 15 Javascript
jQuery 性能优化手册 推荐
Feb 23 Javascript
jquery禁止回车触发表单提交
Dec 12 Javascript
JavaScript创建一个object对象并操作对象属性的用法
Mar 23 Javascript
JavaScript使用RegExp进行正则匹配的方法
Jul 11 Javascript
基于Node.js的JavaScript项目构建工具gulp的使用教程
May 20 Javascript
javascript事件的传播基础实例讲解(35)
Feb 14 Javascript
基于JS实现移动端左滑删除功能
Jul 28 Javascript
ionic2屏幕适配实现适配手机、平板等设备的示例代码
Aug 11 Javascript
Vue项目全局配置微信分享思路详解
May 04 Javascript
JavaScript实现浅拷贝与深拷贝的方法分析
Jul 05 Javascript
小程序实现侧滑删除功能
Jun 25 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
Zend 输出产生XML解析错误
2009/03/03 PHP
PHP的拦截器实例分析
2014/11/03 PHP
CodeIgniter视图使用注意事项
2016/01/20 PHP
escape、encodeURI 和 encodeURIComponent 的区别
2009/03/02 Javascript
web的各种前端打印方法之jquery打印插件jqprint实现网页打印
2013/01/09 Javascript
MultiSelect左右选择控件的设计与实现介绍
2013/06/08 Javascript
下拉列表选择项的选中在不同浏览器中的兼容性问题探讨
2013/09/18 Javascript
jQuery.holdReady()方法用法实例
2014/12/27 Javascript
【JS+CSS3】实现带预览图幻灯片效果的示例代码
2016/03/17 Javascript
Javascript的表单验证-提交表单
2016/03/18 Javascript
jquery获取复选框checkbox的值实现方法
2016/05/30 Javascript
第七篇Bootstrap表单布局实例代码详解(三种表单布局)
2016/06/21 Javascript
Angular 2 ngForm中的ngModel、[ngModel]和[(ngModel)]的写法
2017/06/29 Javascript
JavaScript多线程运行库Nexus.js详解
2017/12/22 Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
2018/09/30 Javascript
vue render函数动态加载img的src路径操作
2020/10/26 Javascript
[04:59]DOTA2-DPC中国联赛 正赛 Ehome vs iG 选手采访
2021/03/11 DOTA
python装饰器使用方法实例
2013/11/21 Python
Python的Flask框架中web表单的教程
2015/04/20 Python
flask + pymysql操作Mysql数据库的实例
2017/11/13 Python
ubuntu安装sublime3并配置python3环境的方法
2018/03/15 Python
Python操作json的方法实例分析
2018/12/06 Python
Python如何应用cx_Oracle获取oracle中的clob字段问题
2019/08/27 Python
Python 中的函数装饰器和闭包详解
2021/02/06 Python
css3 中的新特性加强记忆详解
2016/04/16 HTML / CSS
Eyeko美国:屡获殊荣的睫毛膏、眼线笔和眉妆
2018/07/05 全球购物
世界上最大的艺术和工艺用品商店:MisterArt.com
2018/07/13 全球购物
美国排名第一的泳池用品直接来源:In The Swim
2019/09/23 全球购物
银行实习生的自我评价
2013/12/09 职场文书
酒店开业庆典主持词
2014/03/21 职场文书
祖国在我心中演讲稿400字
2014/05/04 职场文书
生物技术专业求职信
2014/06/10 职场文书
商场客服专员岗位职责
2014/06/13 职场文书
应聘教师求职信
2014/07/19 职场文书
运动会宣传稿100字
2015/07/23 职场文书
Python 中random 库的详细使用
2021/06/03 Python