如何实现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 相关文章推荐
jquery.fileEveryWhere.js 一个跨浏览器的file显示插件
Oct 24 Javascript
jQuery trigger()方法用法介绍
Jan 13 Javascript
使用AngularJS编写较为优美的JavaScript代码指南
Jun 19 Javascript
浅谈javascript中new操作符的原理
Jun 07 Javascript
检查表单元素的值是否为空的实例代码
Jun 16 Javascript
Bootstrap栅格系统学习笔记
Nov 25 Javascript
jQuery使用unlock.js插件实现滑动解锁
Apr 04 jQuery
javascript 中null和undefined区分和比较
Apr 19 Javascript
React Native之ListView实现九宫格效果的示例
Aug 02 Javascript
实战node静态文件服务器的示例代码
Mar 08 Javascript
node实现简单的增删改查接口实例代码
Aug 22 Javascript
在JavaScript中如何使用宏详解
May 06 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 5.3.1 安装包 VC9 VC6不同版本的区别是什么
2010/07/04 PHP
上传文件先创建目录 再上传到目录里面去
2010/12/29 PHP
删除html标签得到纯文本可处理嵌套的标签
2014/04/28 PHP
浅谈PHP无限极分类原理
2019/03/14 PHP
PHP Trait代码复用类与多继承实现方法详解
2019/06/17 PHP
用javascript自动显示最后更新时间
2007/03/15 Javascript
jquery $.each() 使用小探
2013/08/23 Javascript
JavaScript-RegExp对象只能使用一次问题解决方法
2014/06/23 Javascript
IE8下Jquery获取select选中的值post到后台报错问题
2014/07/02 Javascript
网页运行时提示对象不支持abigimage属性或方法
2014/08/10 Javascript
JS使用正则实现去掉字符串左右空格的方法
2016/12/27 Javascript
利用Vue.js框架实现火车票查询系统(附源码)
2017/02/27 Javascript
判断jQuery是否加载完成,没完成继续判断的解决方法
2017/12/06 jQuery
webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程
2019/06/10 Javascript
微信小程序日历插件代码实例
2019/12/04 Javascript
Python实现的二维码生成小软件
2014/07/11 Python
机器学习经典算法-logistic回归代码详解
2017/12/22 Python
python re模块findall()函数实例解析
2018/01/19 Python
浅谈pycharm下找不到sqlalchemy的问题
2018/12/03 Python
Django User 模块之 AbstractUser 扩展详解
2020/03/11 Python
python 子类调用父类的构造函数实例
2020/03/12 Python
python pyg2plot的原理知识点总结
2021/02/28 Python
Bose美国官网:购买Bose耳机和音箱
2019/03/10 全球购物
幼教毕业生自我鉴定
2014/01/12 职场文书
运动会广播稿30字
2014/01/21 职场文书
机械个人求职信范文
2014/01/24 职场文书
音乐教学案例
2014/01/30 职场文书
授权委托书格式模板
2014/04/03 职场文书
高三励志标语
2014/06/05 职场文书
乡镇党的群众路线对照检查材料
2014/09/24 职场文书
关爱留守儿童主题班会
2015/08/13 职场文书
2016年感恩教师节活动总结
2016/04/01 职场文书
使用Oracle跟踪文件的问题详解
2021/06/28 Oracle
解析python中的jsonpath 提取器
2022/01/18 Python
Win10防火墙白名单怎么设置?Win10添加防火墙白名单方法
2022/04/06 数码科技
vue配置型表格基于el-table拓展之table-plus组件
2022/04/12 Vue.js