如何实现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 相关文章推荐
获取body标签的两种方法
Oct 13 Javascript
js showModalDialog弹出窗口实例详解
Jan 07 Javascript
js根据鼠标移动速度背景图片自动旋转的方法
Feb 28 Javascript
jquery解析XML及获取XML节点名称的实现代码
May 18 Javascript
JavaScript进阶练习及简单实例分析
Jun 03 Javascript
jquery实现文本框的禁用和启用
Dec 07 Javascript
jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实例代码
Dec 27 Javascript
Angular4 中常用的指令入门总结
Jun 12 Javascript
Echarts基本用法_动力节点Java学院整理
Aug 11 Javascript
JavaScript数组,JSON对象实现动态添加、修改、删除功能示例
May 26 Javascript
jquery获取input输入框中的值
Nov 13 jQuery
react antd表格中渲染一张或多张图片的实例
Oct 28 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中用PDO查询Mysql来避免SQL注入风险的方法
2013/04/25 PHP
PHP中执行cmd命令的方法
2014/10/11 PHP
Thinkphp无限级分类代码
2015/11/11 PHP
微信公众号实现扫码获取微信用户信息(网页授权)
2019/04/09 PHP
JS中剪贴板兼容性、判断复制成功或失败
2021/03/09 Javascript
基于jquery的button默认enter事件(回车事件)。
2011/05/18 Javascript
使用开源工具制作网页验证码的方法
2016/10/17 Javascript
jQuery插件扩展实例【添加回调函数】
2016/11/26 Javascript
基于rem的移动端响应式适配方案(详解)
2017/07/07 Javascript
Angular 4.0学习教程之架构详解
2017/09/12 Javascript
vue 项目如何引入微信sdk接口的方法
2017/12/18 Javascript
nuxt框架中路由鉴权之Koa和Session的用法
2018/05/09 Javascript
浅谈对于react-thunk中间件的简单理解
2019/05/01 Javascript
vue 中this.$set 动态绑定数据的案例讲解
2021/01/29 Vue.js
[35:43]2018DOTA2亚洲邀请赛 4.1 小组赛B组 paiN vs Effect
2018/04/03 DOTA
Python基于回溯法子集树模板解决全排列问题示例
2017/09/07 Python
python中使用%与.format格式化文本方法解析
2017/12/27 Python
Python生成指定数量的优惠码实操内容
2019/06/18 Python
python如何使用socketserver模块实现并发聊天
2019/12/14 Python
通过 Python 和 OpenCV 实现目标数量监控
2020/01/05 Python
使用CSS3制作响应式导航菜单的方法
2015/07/12 HTML / CSS
浅谈pc和移动端的响应式的使用
2019/01/03 HTML / CSS
Vision Directa智利眼镜网:框架眼镜、隐形眼镜和名牌太阳眼镜
2016/11/23 全球购物
Omio葡萄牙:全欧洲低价大巴、火车和航班搜索和比价
2019/02/09 全球购物
文秘专业应届生求职信范文
2013/11/14 职场文书
办理生育手续介绍信
2014/01/14 职场文书
英语感恩演讲稿
2014/01/14 职场文书
学生社团文化节开幕式主持词
2014/03/28 职场文书
《老山界》教学反思
2014/04/08 职场文书
购房协议书范本
2014/04/11 职场文书
2014年最新版离婚协议书范本
2014/11/25 职场文书
思想道德自我评价2015
2015/03/09 职场文书
2016年感恩母亲节活动总结
2016/04/01 职场文书
JavaScript嵌入百度地图API的最详细方法
2021/04/16 Javascript
浅析Python OpenCV三种滤镜效果
2022/04/11 Python
人物搭配车车超萌联名预备中 【咒术迴战】 ⨯ 【天竺鼠车车】 展开合作
2022/04/11 日漫