如何实现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 构造函数 实例分析
Nov 26 Javascript
使用pjax实现无刷新更改页面url
Feb 05 Javascript
javascript基本包装类型介绍
Apr 10 Javascript
javascript实现保留两位小数的多种方法
Dec 18 Javascript
jQuery 获取页面li数组并删除不在数组中的key
Aug 02 Javascript
vue如何实现observer和watcher源码解析
Mar 09 Javascript
利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)
Apr 24 Javascript
基于bootstrap实现多个下拉框同时搜索功能
Jul 19 Javascript
vue组件初学_弹射小球(实例讲解)
Sep 06 Javascript
vue异步axios获取的数据渲染到页面的方法
Aug 09 Javascript
vue element和nuxt的使用技巧分享
Jan 14 Vue.js
JavaScript 中for/of,for/in 的详细介绍
Nov 17 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屏蔽过滤指定关键字的方法
2014/11/03 PHP
PHP将字符分解为多个字符串的方法
2014/11/22 PHP
PHP用反撇号执行外部命令
2015/04/14 PHP
PHP 类与构造函数解析
2017/02/06 PHP
PHP实现求解最长公共子串问题的方法
2017/11/17 PHP
PHP获取日期对应星期、一周日期、星期开始与结束日期的方法
2018/06/22 PHP
JavaScript中函数声明优先于变量声明的实例分析
2012/03/01 Javascript
js弹出层(jQuery插件形式附带reLoad功能)
2013/04/12 Javascript
浅析js设置控件的readonly与enabled属性问题
2013/12/25 Javascript
使用jQuery判断IE浏览器版本的代码
2014/06/14 Javascript
jQuery过滤选择器详解
2015/01/13 Javascript
浅谈JavaScript 函数参数传递到底是值传递还是引用传递
2016/08/23 Javascript
EsLint入门学习教程
2017/02/17 Javascript
Vue瀑布流插件的使用示例
2018/09/19 Javascript
实例讲解JS中pop使用方法
2019/01/27 Javascript
JS实现iframe中子父页面跨域通讯的方法分析
2020/03/10 Javascript
学习python之编写简单简单连接数据库并执行查询操作
2016/02/27 Python
python实现多线程抓取知乎用户
2016/12/12 Python
Python for循环中的陷阱详解
2018/07/13 Python
Python输出\u编码将其转换成中文的实例
2018/12/15 Python
Python使用Pandas库实现MySQL数据库的读写
2019/07/06 Python
python判断自身是否正在运行的方法
2019/08/08 Python
Python多线程及其基本使用方法实例分析
2019/10/29 Python
详解python定时简单爬取网页新闻存入数据库并发送邮件
2020/11/27 Python
使用CSS3中的calc()属性来以算式表达尺寸数值
2016/06/06 HTML / CSS
外语专业毕业生自我评价分享
2013/10/05 职场文书
2014年上半年工作自我评价
2014/01/18 职场文书
厂办主管岗位职责范本
2014/02/28 职场文书
工程采购员岗位职责
2014/03/09 职场文书
C++程序员求职信范文
2014/04/14 职场文书
《长江之歌》教学反思
2014/04/17 职场文书
个人租房协议书样本
2014/10/01 职场文书
2014年军人思想汇报范文
2014/10/12 职场文书
成绩单评语
2015/01/04 职场文书
通知书大全
2015/04/27 职场文书
MYSQL数据库使用UTF-8中文编码乱码的解决办法
2021/05/26 MySQL