如何实现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 相关文章推荐
IE6与IE7中,innerHTML获取param的区别
Mar 15 Javascript
JQuery 无废话系列教程(二) jquery实战篇上
Jun 23 Javascript
js原生态函数中使用jQuery中的 $(this)无效的解决方法
May 25 Javascript
jQuery的控件及事件(输入控件及回车事件)使用示例
Jul 25 Javascript
一个JS的日期格式化算法示例
Jul 31 Javascript
原生JS实现LOADING效果
Mar 16 Javascript
jQuery插件pagination实现分页特效
Apr 12 Javascript
JS实现JSON.stringify的实例代码讲解
Feb 07 Javascript
Webpack打包慢问题的完美解决方法
Mar 16 Javascript
vue-resource调用promise取数据方式详解
Jul 21 Javascript
vue 使用async写数字动态加载效果案例
Jul 18 Javascript
Vue实现购物小球抛物线的方法实例
Nov 22 Vue.js
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中文分词 自动获取关键词介绍
2012/11/13 PHP
php缩放图片(根据宽高的等比例缩放)实例介绍
2013/06/09 PHP
PHP输出英文时间日期的安全方法(RFC 1123格式)
2014/06/13 PHP
php常量详细解析
2015/10/27 PHP
yii2 modal弹窗之ActiveForm ajax表单异步验证
2016/06/13 PHP
session 加入redis的实现代码
2016/07/15 PHP
php日志函数error_log用法实例分析
2019/09/23 PHP
Laravel数据库读写分离配置的方法
2019/10/13 PHP
javascript radio 联动效果
2009/03/04 Javascript
Vue.js每天必学之方法与事件处理器
2016/09/06 Javascript
vue2.0 axios前后端数据处理实例代码
2017/06/30 Javascript
mui 打开新窗口的方式总结及注意事项
2017/08/20 Javascript
基于vue-ssr的静态网站生成器VuePress 初体验
2018/04/17 Javascript
vue项目中api接口管理总结
2018/04/20 Javascript
JS实现的简单下拉框联动功能示例
2018/05/11 Javascript
详谈js的变量提升以及使用方法
2018/10/06 Javascript
30分钟精通React今年最劲爆的新特性——React Hooks
2019/03/11 Javascript
详解Vue路由自动注入实践
2019/04/17 Javascript
微信小程序HTTP请求从0到1封装
2019/09/09 Javascript
三剑客:offset、client和scroll还傻傻分不清?
2020/12/04 Javascript
python中使用enumerate函数遍历元素实例
2014/06/16 Python
Python使用pandas处理CSV文件的实例讲解
2018/06/22 Python
python pandas 对时间序列文件处理的实例
2018/06/22 Python
详解重置Django migration的常见方式
2019/02/15 Python
Django框架orM与自定义SQL语句混合事务控制操作
2019/06/27 Python
python3获取url文件大小示例代码
2019/09/18 Python
1688平价精选商城:阿里集团旗下,工厂出厂价格直销
2017/04/24 全球购物
为奢侈时尚带来了慈善元素:Olivela
2018/09/29 全球购物
ALDO加拿大官网:加拿大女鞋品牌
2018/12/22 全球购物
意大利辅助药品、药物和补品在线销售:FarmaEurope
2020/04/29 全球购物
EJB2和EJB3在架构上的不同点
2014/09/29 面试题
简历中自我评价范文3则
2013/12/14 职场文书
会计专业毕业生求职信分享
2014/01/03 职场文书
会计求职信范文
2014/05/24 职场文书
爱护公共设施标语
2014/06/24 职场文书
使用CSS实现百叶窗效果示例代码
2023/05/07 HTML / CSS