如何实现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 相关文章推荐
讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别
Apr 12 Javascript
js将字符串转成正则表达式的实现方法
Nov 13 Javascript
JS数组的常见用法实例
Feb 10 Javascript
jquery实现键盘左右翻页特效
Apr 30 Javascript
AngularJS国际化详解及示例代码
Aug 18 Javascript
jQuery使用zTree插件实现可拖拽的树示例
Sep 23 jQuery
使用Dropzone.js上传的示例代码
Oct 10 Javascript
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
Jan 18 jQuery
javascript实现手动点赞效果
Apr 09 Javascript
vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置)
Apr 12 Javascript
jquery.pager.js实现分页效果
Jul 29 jQuery
JS前后端实现身份证号验证代码解析
Jul 23 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和jquery实现地图区域数据统计展示数据示例
2014/02/12 PHP
PHP加密解密类实例分析
2015/04/20 PHP
PHP邮件群发机实现代码
2016/02/16 PHP
javascript add event remove event
2008/04/07 Javascript
Extjs学习笔记之八 继承和事件基础
2010/01/08 Javascript
15个常用的jquery代码片段
2015/12/19 Javascript
浅谈javascript 函数表达式和函数声明的区别
2016/01/05 Javascript
JQuery插件Marquee.js实现无缝滚动效果
2016/04/26 Javascript
自定义vue全局组件use使用、vuex的使用详解
2017/06/14 Javascript
微信小程序与php 实现微信支付的简单实例
2017/06/23 Javascript
javascript实现电脑和手机版样式切换
2017/11/10 Javascript
vue页面切换到滚动页面显示顶部的实例
2018/03/13 Javascript
Vue入门之animate过渡动画效果
2018/04/08 Javascript
JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法
2018/06/07 Javascript
基于rollup的组件库打包体积优化小结
2018/06/18 Javascript
如何能分清npm cnpm npx nvm
2019/01/17 Javascript
浅谈webpack构建工具配置和常用插件总结
2020/05/11 Javascript
JavaScript实现图片合成下载的示例
2020/11/19 Javascript
python读取注册表中值的方法
2013/04/08 Python
python3 shelve模块的详解
2017/07/08 Python
Python实现的选择排序算法示例
2017/11/29 Python
python判断一个集合是否为另一个集合的子集方法
2018/05/04 Python
python迭代dict的key和value的方法
2018/07/06 Python
对python列表里的字典元素去重方法详解
2019/01/21 Python
详解Python locals()的陷阱
2019/03/26 Python
python并发编程 Process对象的其他属性方法join方法详解
2019/08/20 Python
python实现计算器简易版
2020/12/17 Python
css3针对移动端卡顿问题的解决(动画性能优化)
2020/02/14 HTML / CSS
Saucony澳大利亚官网:美国跑鞋品牌,运动鞋中的劳斯莱斯
2018/05/05 全球购物
次世代生活态度:Hypebeast
2018/07/05 全球购物
英国最大的户外商店:Go Outdoors
2019/04/17 全球购物
学生党员思想汇报范文
2014/01/09 职场文书
安全检查与奖惩制度
2014/01/23 职场文书
动漫专业高职生职业生涯规划书
2014/02/15 职场文书
幼儿园社区活动总结
2014/07/07 职场文书
超外差式晶体管收音机的组装与统调
2021/04/22 无线电