如何实现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 相关文章推荐
基于jQuery试卷自动排版系统
Jul 18 Javascript
javascript的原生方法获取数组中的最大(最小)值
Dec 19 Javascript
jQuery去掉字符串起始和结尾的空格(多种方法实现)
Apr 01 Javascript
javascript打印输出json实例
Nov 11 Javascript
Jquery1.9.1源码分析系列(十五)动画处理之外篇
Dec 04 Javascript
Seajs是什么及sea.js 由来,特点以及优势
Oct 13 Javascript
JS添加或修改控件的样式(Class)实现方法
Oct 15 Javascript
解决html input验证只能输入数字,不能输入其他的问题
Jul 21 Javascript
深入理解Vue生命周期、手动挂载及挂载子组件
Sep 27 Javascript
JS闭包原理与应用经典示例
Dec 20 Javascript
解决vue-loader加载不上的问题
Oct 21 Javascript
Vue实现动态查询规则生成组件
May 27 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
多数据表共用一个页的新闻发布
2006/10/09 PHP
thinkphp视图模型查询提示ERR: 1146:Table 'db.pr_order_view' doesn't exist的解决方法
2014/10/30 PHP
Dwz与thinkphp整合下的数据导出到Excel实例
2014/12/04 PHP
php 三元运算符实例详细介绍
2016/12/15 PHP
PHP钩子与简单分发方式实例分析
2017/09/04 PHP
PHP迭代器和迭代的实现与使用方法分析
2018/04/19 PHP
在Laravel5中正确设置文件权限的方法
2019/05/22 PHP
用jscript启动sqlserver
2007/06/21 Javascript
js加载之使用DOM方法动态加载Javascript文件
2013/11/08 Javascript
Javascript中prototype属性实现给内置对象添加新的方法
2015/05/14 Javascript
Vue自定义事件(详解)
2017/08/19 Javascript
使用mint-ui实现省市区三级联动效果的示例代码
2018/02/09 Javascript
JavaScript简单实现的仿微博留言功能示例
2019/01/17 Javascript
layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)
2019/09/24 Javascript
快速解决vue2+vue-cli3项目ie兼容的问题
2020/11/17 Vue.js
采用python实现简单QQ单用户机器人的方法
2014/07/03 Python
详解python eval函数的妙用
2017/11/16 Python
python实现朴素贝叶斯算法
2018/11/19 Python
Python设计模式之抽象工厂模式原理与用法详解
2019/01/15 Python
解决Python 命令行执行脚本时,提示导入的包找不到的问题
2019/01/19 Python
python tornado修改log输出方式
2019/11/18 Python
基于torch.where和布尔索引的速度比较
2020/01/02 Python
keras模型保存为tensorflow的二进制模型方式
2020/05/25 Python
浅谈keras.callbacks设置模型保存策略
2020/06/18 Python
python调用百度API实现人脸识别
2020/11/17 Python
python读写数据读写csv文件(pandas用法)
2020/12/14 Python
基于HTML5 WebGL的3D机房的示例
2018/03/16 HTML / CSS
天猫精选:上天猫,就够了
2016/09/21 全球购物
Trunki英国官网:儿童坐骑式行李箱
2017/05/30 全球购物
本科生职业生涯规划书范文
2014/01/21 职场文书
服务员岗位职责范本
2015/04/09 职场文书
初中体育教学随笔
2015/08/15 职场文书
学生会主席任命书
2015/09/21 职场文书
简单介绍 http请求响应参数、无连接无状态、MIME、状态码、端口、telnet、curl
2021/03/31 HTML / CSS
叶县这家生产军用电台的兵工厂,人称“四机部”,走出一上将
2022/02/18 无线电
Go中使用gjson来操作JSON数据的实现
2022/08/14 Golang