用javascript动态调整iframe高度的方法


Posted in Javascript onMarch 06, 2007

当你在页面上使用了iframe之后,一般来说会不希望iframe显示难看的滚动条,以使iframe里面的内容和主页面的内容浑然一体。这时候你会设置 scrolling="no" 属性。但是这样一来如果iframe里面的内容是变化的,高度会随之内容的变化而变化的时候,你的iframe就会显得太长导致底下一大片空白,或者正好相反,由于iframe的高度太小导致一部分内容会被挡住。这里我提供一个兼容IE/NS/Firefox的javascript脚本实现动态调整iframe的高度。如果需要调整宽度的话,原理是一样的,本文不加详述。

     首先,在你的主页面上必须包含以下这段javascript代码:

<script language="Javascript">  
var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1]  
//extra height in px to add to iframe in FireFox 1.0+ browsers  
var FFextraHeight=getFFVersion>=0.1? 16 : 0   function dyniframesize(iframename) {  
var pTar = null;  
if (document.getElementById){  
pTar = document.getElementById(iframename);  
}  
else{  
eval('pTar = ' + iframename + ';');  
}  
if (pTar && !window.opera){  
//begin resizing iframe  
pTar.style.display="block"  
if (pTar.contentDocument && pTar.contentDocument.body.offsetHeight){  
//ns6 syntax  
pTar.height = pTar.contentDocument.body.offsetHeight+FFextraHeight;   
}  
else if (pTar.Document && pTar.Document.body.scrollHeight){  
//ie5+ syntax  
pTar.height = pTar.Document.body.scrollHeight;  
}  
}  
}  
</script> 

然后对于主页面用到iframe的地方添加代码:

<iframe id="myTestFrameID" 
onload="javascript:{dyniframesize('myTestFrameID');}" 
marginwidth=0 marginheight=0 frameborder=0 
scrolling=no src="/myiframesrc.php"

Javascript 相关文章推荐
通过javascript的匿名函数来分析几段简单有趣的代码
Jun 29 Javascript
js中substr,substring,indexOf,lastIndexOf,split,replace的用法详解
Nov 09 Javascript
jquery实现横向图片轮播特效代码分享
Nov 19 Javascript
js获取元素的标签名实现方法
Oct 08 Javascript
ExtJS 4.2 Grid组件单元格合并的方法
Oct 12 Javascript
js 性能优化之算法和流程控制
Feb 15 Javascript
underscore之Chaining_动力节点Java学院整理
Jul 10 Javascript
利用Vue实现移动端图片轮播组件的方法实例
Aug 23 Javascript
js实现以最简单的方式将数组元素添加到对象中的方法
Dec 20 Javascript
Vue仿支付宝支付功能
May 25 Javascript
vue+element tabs选项卡分页效果
Jun 29 Javascript
深入了解JS之作用域和闭包
Jun 16 Javascript
静态图片的十一种滤镜效果--不支持Ie7及非IE浏览器。
Mar 06 #Javascript
限制文本字节数js代码
Mar 06 #Javascript
用Div仿showModalDialog模式菜单的效果的代码
Mar 05 #Javascript
HTML-CSS群中单选引发的“事件”
Mar 05 #Javascript
用javascript实现页面打印的三种方法
Mar 05 #Javascript
一个可以显示阴历的JS代码
Mar 05 #Javascript
JavaScript实现Sleep函数的代码
Mar 04 #Javascript
You might like
CI框架源码阅读,系统常量文件constants.php的配置
2013/02/28 PHP
php及codeigniter使用session-cookie的方法(详解)
2017/04/06 PHP
PHP安装memcache扩展的步骤讲解
2019/02/14 PHP
JavaScript 提升运行速度之循环篇 译文
2009/08/15 Javascript
jquery ready函数源代码研究
2009/12/06 Javascript
用XMLDOM和ADODB.Stream实现base64编码解码实现代码
2010/11/28 Javascript
js 字符串转换成数字的三种方法
2013/03/23 Javascript
jQuery中prepend()方法使用详解
2015/08/11 Javascript
JavaScript动态设置div的样式的方法
2015/12/26 Javascript
使用vue.js制作分页组件
2016/06/27 Javascript
详解最新vue-cli 2.9.1的webpack存在问题
2017/12/16 Javascript
浅谈Vue render函数在ElementUi中的应用
2018/09/06 Javascript
详解vue-cli+element-ui树形表格(多级表格折腾小计)
2019/04/17 Javascript
生产制造追溯系统之在线打印功能
2019/06/03 Javascript
jQuery实现滑动开关效果
2020/08/02 jQuery
在Vue里如何把网页的数据导出到Excel的方法
2020/09/30 Javascript
vue 如何使用递归组件
2020/10/23 Javascript
Python实现的下载8000首儿歌的代码分享
2014/11/21 Python
Python中使用摄像头实现简单的延时摄影技术
2015/03/27 Python
几行Python代码爬取3000+上市公司的信息
2019/01/24 Python
int在python中的含义以及用法
2019/06/27 Python
Python 旋转打印各种矩形的方法
2019/07/09 Python
Django实现跨域请求过程详解
2019/07/25 Python
pytorch 求网络模型参数实例
2019/12/30 Python
基于python3.7利用Motor来异步读写Mongodb提高效率(推荐)
2020/04/29 Python
Python使用pyenv实现多环境管理
2021/02/05 Python
万宝龙英国官网:Montblanc手表、书写工具、皮革和珠宝
2018/10/16 全球购物
adidas菲律宾官网:adidas PH
2020/02/07 全球购物
某科技软件测试面试题
2013/05/19 面试题
测控技术与通信工程毕业生自荐信范文
2013/12/28 职场文书
法学个人求职信范文
2014/01/27 职场文书
小学生差生评语
2014/12/29 职场文书
承诺函格式模板
2015/01/21 职场文书
违纪检讨书范文
2015/01/27 职场文书
如何拟写通知正文?
2019/04/02 职场文书
Python识别花卉种类鉴定网络热门植物并自动整理分类
2022/04/08 Python