如何实现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 相关文章推荐
slice函数的用法 之不错的应用
Dec 29 Javascript
页面只有一个text的时候,回车自动submit的解决方法
Aug 12 Javascript
DB.ASP 用Javascript写ASP很灵活很好用很easy
Jul 31 Javascript
利用div+jquery自定义滚动条样式的2种方法
Jul 18 Javascript
Jquery插件仿百度搜索关键字自动匹配功能
May 11 Javascript
jquery配合.NET实现点击指定绑定数据并且能够一键下载
Oct 28 Javascript
JS实战篇之收缩菜单表单布局
Dec 10 Javascript
微信小程序 基础知识css样式media标签
Feb 15 Javascript
Angular中ng-repeat与ul li的多层嵌套重复问题
Jul 24 Javascript
Vue-Cli中自定义过滤器的实现代码
Aug 12 Javascript
详解基于mpvue的小程序markdown适配解决方案
May 08 Javascript
vue 实现axios拦截、页面跳转和token 验证
Jul 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专用数组排序类ArraySortUtil用法实例
2015/04/03 PHP
Apache服务器下防止图片盗链的办法
2015/07/06 PHP
探究Laravel使用env函数读取环境变量为null的问题
2016/12/06 PHP
PHP 实现页面静态化的几种方法
2017/07/23 PHP
脚本安需导入(装载)的三种模式的对比
2007/06/24 Javascript
JavaScript 字符串乘法
2009/08/20 Javascript
基于jquery的一个简单的脚本验证插件
2010/04/05 Javascript
JS实现将人民币金额转换为大写的示例代码
2014/02/13 Javascript
javascript每日必学之封装
2016/02/23 Javascript
jquery.qtip提示信息插件用法简单实例
2016/06/17 Javascript
JS制作适用于手机和电脑的通知信息效果
2016/10/28 Javascript
详解微信小程序 页面跳转 传递参数
2016/12/08 Javascript
vue组件中使用iframe元素的示例代码
2017/12/13 Javascript
vue单页开发父子组件传值思路详解
2018/05/18 Javascript
微信小程序有旋转动画效果的音乐组件实例代码
2018/08/22 Javascript
vue.js实现带日期星期的数字时钟功能示例
2018/08/28 Javascript
解决Vue2.0中使用less给元素添加背景图片出现的问题
2018/09/03 Javascript
JS实现带阴历的日历功能详解
2019/01/24 Javascript
[06:37]2014DOTA2国际邀请赛 昔日王者渴望重回巅峰
2014/07/12 DOTA
Python的“二维”字典 (two-dimension dictionary)定义与实现方法
2016/04/27 Python
python模块之re正则表达式详解
2017/02/03 Python
Django objects.all()、objects.get()与objects.filter()之间的区别介绍
2017/06/12 Python
python得到单词模式的示例
2018/10/15 Python
Python 实现王者荣耀中的敏感词过滤示例
2019/01/21 Python
python 将日期戳(五位数时间)转换为标准时间
2019/07/11 Python
python实现简单银行管理系统
2019/10/25 Python
Python字符串、列表、元组、字典、集合的补充实例详解
2019/12/20 Python
Python 实现一个计时器
2020/07/28 Python
深入解析HTML5 Canvas控制图形矩阵变换的方法
2016/03/24 HTML / CSS
草莓网英国官网:Strawberrynet UK
2017/02/12 全球购物
从当地商店送来的杂货:Instacart
2018/08/19 全球购物
《吃水不忘挖井人》教学反思
2014/04/15 职场文书
培养联系人考察意见
2015/06/01 职场文书
防溺水安全教育主题班会
2015/08/12 职场文书
C3 线性化算法与 MRO之Python中的多继承
2021/10/05 Python
MySQ InnoDB和MyISAM存储引擎介绍
2022/04/26 MySQL