如何实现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 相关文章推荐
Stop SQL Server
Jun 21 Javascript
使一个函数作为另外一个函数的参数来运行的javascript代码
Aug 13 Javascript
js 判断上传文件大小及格式代码
Nov 13 Javascript
同一个网页中实现多个JavaScript特效的方法
Feb 02 Javascript
javascript事件模型介绍
May 31 Javascript
vue实现添加标签demo示例代码
Jan 21 Javascript
浅谈在koa2中实现页面渲染的全局数据
Oct 09 Javascript
vue文件运行的方法教学
Feb 12 Javascript
javascript读取本地文件和目录方法详解
Aug 06 Javascript
JS pushlet XMLAdapter适配器用法案例解析
Oct 16 Javascript
vue3+typeScript穿梭框的实现示例
Dec 29 Vue.js
JS继承最简单的理解方式
Mar 31 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边学边教》(02.Apache+PHP环境配置――下篇)
2006/12/13 PHP
php中spl_autoload详解
2014/10/17 PHP
PHP用反撇号执行外部命令
2015/04/14 PHP
php中mkdir()函数的权限问题分析
2016/09/24 PHP
jQuery下扩展插件和拓展函数的写法(匿名函数使用的典型例子)
2010/10/20 Javascript
ie7+背景透明文字不透明超级简单的实现方法
2014/01/17 Javascript
javascript事件函数中获得事件源的两种不错方法
2014/03/17 Javascript
chrome下img加载对height()的影响示例探讨
2014/05/26 Javascript
JavaScript实现的字符串replaceAll函数代码分享
2015/04/02 Javascript
JS中捕获console.log()输出的方法
2015/04/16 Javascript
JS实现双击编辑可修改状态的方法
2015/08/14 Javascript
Bootstrap实现默认导航栏效果
2020/09/21 Javascript
探讨:JavaScript ECAMScript5 新特性之get/set访问器
2016/05/05 Javascript
React Native中Navigator的使用方法示例
2017/10/13 Javascript
一文快速了解JQuery中的AJAX
2019/05/31 jQuery
vue router-link 默认a标签去除下划线的实现
2020/11/06 Javascript
[01:19:11]Ti4 循环赛第二日 NaVi.us vs iG
2014/07/11 DOTA
[45:18]完美世界DOTA2联赛循环赛 PXG vs IO 第二场 11.06
2020/11/09 DOTA
Python类的用法实例浅析
2015/05/27 Python
基于Python对象引用、可变性和垃圾回收详解
2017/08/21 Python
Django中针对基于类的视图添加csrf_exempt实例代码
2018/02/11 Python
解决python xx.py文件点击完之后一闪而过的问题
2019/06/24 Python
Django 设置多环境配置文件载入问题
2020/02/25 Python
Python使用GitPython操作Git版本库的方法
2020/02/29 Python
解决Django Haystack全文检索为空的问题
2020/05/19 Python
CSS3中Color的一些特性介绍
2012/05/27 HTML / CSS
CSS类名支持中文命名的示例
2014/04/04 HTML / CSS
解释一下ArrayList Vector和LinkedList的实现和区别
2013/04/26 面试题
通信专业个人自我鉴定
2013/10/21 职场文书
代领学位证书毕业证书委托书
2014/09/30 职场文书
送给教师们,到底该如何写好教学反思?
2019/07/02 职场文书
毕业季聚会祝酒词!
2019/07/04 职场文书
goland 清除所有的默认设置操作
2021/04/28 Golang
Java9新特性对HTTP2协议支持与非阻塞HTTP API
2022/03/16 Java/Android
动画《平凡职业成就世界最强》宣布制作OVA
2022/04/01 日漫
SQL Server的存储过程与触发器以及系统函数和自定义函数
2022/04/10 SQL Server