如何实现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 Sort 表格排序
Oct 31 Javascript
HTML Color Picker(js拾色器效果)
Aug 27 Javascript
javascript随机将第一个dom中的图片添加到第二个div中示例
Oct 08 Javascript
使用jQuery.wechat构建微信WEB应用
Oct 09 Javascript
jquery制作漂亮的弹出层提示消息特效
Dec 23 Javascript
javascript针对不确定函数的执行方法
Dec 16 Javascript
JavaScript——DOM操作——Window.document对象详解
Jul 14 Javascript
[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】
Nov 01 Javascript
JSON与JS对象的区别与对比
Mar 01 Javascript
基于vue-cli vue-router搭建底部导航栏移动前端项目
Feb 28 Javascript
javascript实现滚动条效果
Mar 24 Javascript
使用JS实现鼠标放上图片进行放大离开实现缩小功能
Jan 27 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
Symfony生成二维码的方法
2016/02/04 PHP
PHP实现的迪科斯彻(Dijkstra)最短路径算法实例
2017/09/16 PHP
laravel自定义分页的实现案例offset()和limit()
2019/10/15 PHP
关于laravel5.5的定时任务详解(demo)
2019/10/23 PHP
最新优化收藏到网摘代码(digg,diigo)
2007/02/07 Javascript
Javascript的时间戳和php的时间戳转换注意事项
2013/04/12 Javascript
JavaScript实现维吉尼亚(Vigenere)密码算法实例
2013/11/22 Javascript
JS判断表单输入是否为空(示例代码)
2013/12/23 Javascript
JS对象转换为Jquery对象实现代码
2013/12/29 Javascript
jquery-syntax动态语法着色示例代码
2014/05/14 Javascript
使用JavaScript获取地址栏参数的方法
2014/12/19 Javascript
教你如何使用firebug调试功能了解javascript闭包和this
2015/03/04 Javascript
JavaScript常用脚本汇总(三)
2015/03/04 Javascript
12个非常实用的JavaScript小技巧【推荐】
2016/05/18 Javascript
探究Vue.js 2.0新增的虚拟DOM
2016/10/20 Javascript
jquery实现图片放大点击切换
2017/06/06 jQuery
快速解决vue-cli不能初始化webpack模板的问题
2018/03/20 Javascript
JS 实现微信扫一扫功能
2018/09/14 Javascript
利用weixin-java-miniapp生成小程序码并直接返回图片文件流的方法
2019/03/29 Javascript
Vue登录主页动态背景短视频制作
2019/09/21 Javascript
vue学习之Vue-Router用法实例分析
2020/01/06 Javascript
python实现周期方波信号频谱图
2018/07/21 Python
pyqt5 从本地选择图片 并显示在label上的实例
2019/06/13 Python
Selenium+Python 自动化操控登录界面实例(有简单验证码图片校验)
2019/06/28 Python
Python Numpy库常见用法入门教程
2020/01/16 Python
python中 _、__、__xx__()区别及使用场景
2020/06/30 Python
Python实现爬取网页中动态加载的数据
2020/08/17 Python
python 提高开发效率的5个小技巧
2020/10/19 Python
python可视化分析的实现(matplotlib、seaborn、ggplot2)
2021/02/03 Python
html5 touch事件实现页面上下滑动效果【附代码】
2016/03/10 HTML / CSS
世界顶级俱乐部的官方球衣和套装:Subside Sports
2018/04/22 全球购物
绿色美容,有机护肤品和化妆品:Safe & Chic
2018/10/29 全球购物
幼儿园门卫岗位职责
2014/02/14 职场文书
通信工程专业求职信
2014/06/04 职场文书
2015年团队工作总结范文
2015/05/04 职场文书
寻找最美乡村教师观后感
2015/06/18 职场文书