如何实现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 变量基础知识
Nov 07 Javascript
javascript 显示当前系统时间代码
Dec 28 Javascript
用jQuery扩展自写的 UI导航
Jan 13 Javascript
分享27个jQuery 表单插件集合推荐
Apr 25 Javascript
JavaScript函数的4种调用方法详解
Apr 22 Javascript
jquery、js调用iframe父窗口与子窗口元素的方法整理
Jul 31 Javascript
Bootstrap 下拉多选框插件Bootstrap Multiselect
Jan 22 Javascript
详解React-Native解决键盘遮挡问题(Keyboard遮挡问题)
Jul 13 Javascript
关于Promise 异步编程的实例讲解
Sep 01 Javascript
使用淘宝镜像cnpm安装Vue.js的图文教程
May 17 Javascript
微信小程序中为什么使用var that=this
Aug 27 Javascript
vue实现百度语音合成的实例讲解
Oct 14 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安全配置
2006/10/09 PHP
php查找任何页面上的所有链接的方法
2013/12/03 PHP
PHP实现数组递归转义的方法
2014/08/28 PHP
PHP输出九九乘法表代码实例
2015/03/27 PHP
php循环table实现一行两列显示的方法
2015/06/04 PHP
深入理解PHP之源码目录结构与功能说明
2016/06/01 PHP
PHP AjaxForm提交图片上传并显示图片源码
2016/11/29 PHP
PHP用户管理中常用接口调用实例及解析(含源码)
2017/03/09 PHP
零基础php编程好学吗
2019/10/11 PHP
php框架知识点的整理和补充
2021/03/01 PHP
让JavaScript拥有类似Lambda表达式编程能力的方法
2010/09/12 Javascript
详谈 Jquery Ajax异步处理Json数据.
2011/09/09 Javascript
Google Maps API地图应用示例分享
2014/10/23 Javascript
Nodejs Stream 数据流使用手册
2016/04/17 NodeJs
Vue.js组件使用开发实例教程
2016/11/01 Javascript
帝国cms首页列表页实现点赞功能
2017/10/30 Javascript
使用Vue如何写一个双向数据绑定(面试常见)
2018/04/20 Javascript
微信小程序数据统计和错误统计的实现方法
2019/06/26 Javascript
vue实现列表滚动的过渡动画
2020/06/29 Javascript
Django中几种重定向方法
2015/04/28 Python
Pycharm 操作Django Model的简单运用方法
2018/05/23 Python
Django 使用Ajax进行前后台交互的示例讲解
2018/05/28 Python
利用Django-environ如何区分不同环境
2018/08/26 Python
PySide和PyQt加载ui文件的两种方法
2019/02/27 Python
python爬虫 批量下载zabbix文档代码实例
2019/08/21 Python
如何卸载python插件
2020/07/08 Python
意大利珠宝店:Luxury Zone
2019/01/05 全球购物
房地产出纳岗位职责
2013/12/01 职场文书
大学生村官演讲稿
2014/04/25 职场文书
银行青年文明号事迹材料
2014/05/31 职场文书
房地产营销活动策划方案
2014/09/15 职场文书
我们的节日元宵节活动总结
2015/02/06 职场文书
2016大学自主招生推荐信范文
2015/03/23 职场文书
门面租赁合同范文
2019/08/06 职场文书
HTTP中的Content-type详解
2022/01/18 HTML / CSS
Oracle查看表空间使用率以及爆满解决方案详解
2022/07/23 Oracle