如何实现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全选/全不选/反选另一种实现方法(配合原生js)
Apr 07 Javascript
jquery弹出框的用法示例(2)
Aug 26 Javascript
JavaScript作用域链使用介绍
Aug 29 Javascript
javascript日期格式化示例分享
Mar 05 Javascript
JavaScript常用验证函数实例汇总
Nov 25 Javascript
Javascript冒泡排序算法详解
Dec 03 Javascript
JavaScript操作cookie类实例
Mar 31 Javascript
js获取微信版本号的方法
May 12 Javascript
Bootbox将后台JSON数据填充Form表单的实例代码
Sep 10 Javascript
node app 打包工具pkg的具体使用
Jan 17 Javascript
JS中实现浅拷贝和深拷贝的代码详解
Jun 05 Javascript
Typescript3.9 常用新特性一览(推荐)
May 14 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/06 PHP
PHP根据IP地址获取所在城市具体实现
2013/11/27 PHP
php将html转为图片的实现方法
2017/05/19 PHP
php生成微信红包数组的方法
2019/09/05 PHP
Laravel 手动开关 Eloquent 修改器的操作方法
2019/12/30 PHP
IE10中flexigrid无法显示数据的解决方法
2015/07/26 Javascript
基于jQuery倾斜打开侧边栏菜单特效代码
2015/09/15 Javascript
jQuery定义插件的方法
2015/12/18 Javascript
自动完成的搜索框javascript实现
2016/02/26 Javascript
JavaScript 中有关数组对象的方法(详解)
2016/08/15 Javascript
js自定义QQ菜单效果
2017/01/10 Javascript
Angular2 自定义validators的实现方法
2017/07/05 Javascript
使用百度地图实现地图网格的示例
2018/02/06 Javascript
CKEditor4配置与开发详细中文说明文档
2018/10/08 Javascript
JQuery中queue方法用法示例
2019/01/31 jQuery
vue实现的上拉加载更多数据/分页功能示例
2019/05/25 Javascript
利用Angular7开发一个Radio组件的全过程
2019/07/11 Javascript
解决Vue动态加载本地图片问题
2019/10/09 Javascript
vue element 中的table动态渲染实现(动态表头)
2019/11/21 Javascript
python多线程编程中的join函数使用心得
2014/09/02 Python
用Python编写一个国际象棋AI程序
2014/11/28 Python
Python基于递归和非递归算法求两个数最大公约数、最小公倍数示例
2018/05/21 Python
Python使用pylab库实现绘制直方图功能示例
2018/06/01 Python
Numpy 将二维图像矩阵转换为一维向量的方法
2018/06/05 Python
pygame游戏之旅 python和pygame安装教程
2018/11/20 Python
python-django中的APPEND_SLASH实现方法
2019/06/21 Python
使用Python串口实时显示数据并绘图的例子
2019/12/26 Python
python使用布隆过滤器的实现示例
2020/08/20 Python
html5实现canvas阴影效果示例
2014/05/07 HTML / CSS
特步官方商城:Xtep
2017/03/21 全球购物
新郎新娘婚礼答谢词
2014/01/11 职场文书
五年级语文教学反思
2014/01/30 职场文书
英文慰问信范文
2015/03/24 职场文书
装饰技术负责人岗位职责
2015/04/13 职场文书
html实现随机点名器的示例代码
2021/04/02 Javascript
分析ZooKeeper分布式锁的实现
2021/06/30 Java/Android