如何实现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 04 Javascript
json 入门基础教程 推荐
Oct 31 Javascript
JavaScript高级程序设计 读书笔记之九 本地对象Array
Feb 27 Javascript
JS保留小数点(四舍五入、四舍六入)实现思路及实例
Apr 25 Javascript
javascript对象的使用和属性操作示例详解
Mar 02 Javascript
JS Array.slice 截取数组的实现方法
Jan 02 Javascript
基于jQuery的AJAX和JSON实现纯html数据模板
Aug 09 Javascript
使用elementUI实现将图片上传到本地的示例
Sep 04 Javascript
react的滑动图片验证码组件的示例代码
Feb 27 Javascript
Javascript原型链及instanceof原理详解
May 25 Javascript
微信小程序仿抖音短视频切换效果的实例代码
Jun 24 Javascript
JavaScript中10个Reduce常用场景技巧
Jun 21 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
弄了个检测传输的参数是否为数字的Function
2006/12/06 PHP
用php获取远程图片并把它保存到本地的代码
2008/04/07 PHP
VIM中设置php自动缩进为4个空格的方法详解
2013/06/14 PHP
PHP循环结构实例讲解
2014/02/10 PHP
PHP中session变量的销毁
2014/02/27 PHP
PHP输出九九乘法表代码实例
2015/03/27 PHP
文件上传之SWFUpload插件(代码)
2015/07/30 PHP
thinkphp3.x中display方法及show方法的用法实例
2016/05/19 PHP
JavaScript判断文件上传类型的方法
2014/09/02 Javascript
JavaScript实现仿网易通行证表单验证
2015/05/25 Javascript
Angularjs中使用Filters详解
2016/03/11 Javascript
vue开发心得和技巧分享
2016/10/27 Javascript
jquery写出PC端轮播图实例
2018/01/26 jQuery
JS处理一些简单计算题
2018/02/24 Javascript
微信小程序制作表格的方法
2019/02/14 Javascript
vue从一个页面跳转到另一个页面并携带参数的解决方法
2019/08/12 Javascript
解决layui的input独占一行的问题
2019/09/10 Javascript
基于Python对象引用、可变性和垃圾回收详解
2017/08/21 Python
Python selenium根据class定位页面元素的方法
2019/02/26 Python
PyCharm安装Markdown插件的两种方法
2019/06/24 Python
如何使用Python 打印各种三角形
2019/06/28 Python
python创建与遍历List二维列表的方法
2019/08/16 Python
python 循环数据赋值实例
2019/12/02 Python
python中pivot()函数基础知识点
2021/01/03 Python
plt.figure()参数使用详解及运行演示
2021/01/08 Python
借助HTML5 Canvas来绘制三角形和矩形等多边形的方法
2016/03/14 HTML / CSS
Chicco婴儿用品美国官网:汽车座椅、婴儿推车、高脚椅等
2018/11/05 全球购物
类和结构的区别
2012/08/15 面试题
小学数学课后反思
2014/04/23 职场文书
购房意向书
2014/08/30 职场文书
大学生见习报告范文
2014/11/03 职场文书
2014年社区矫正工作总结
2014/11/18 职场文书
药品开票员岗位职责
2015/04/15 职场文书
电话营销开场白
2015/05/29 职场文书
浅谈Laravel中使用Slack进行异常通知
2021/05/29 PHP
使用CSS实现音波加载效果
2023/05/07 HTML / CSS