用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 IE 与 FF中兼容问题小结
Feb 18 Javascript
jQuery 插件仿百度搜索框智能提示(带Value值)
Jan 22 Javascript
js登录弹出层特效
Mar 07 Javascript
jquery实现平滑的二级下拉菜单效果
Aug 26 Javascript
Javascript函数中的arguments.callee用法实例分析
Sep 16 Javascript
require.js+vue开发微信上传图片组件
Oct 27 Javascript
完美实现js选项卡切换效果(二)
Mar 08 Javascript
element-ui 表格实现单元格可编辑的示例
Feb 26 Javascript
解决Vue.js由于延时显示了{{message}}引用界面的问题
Aug 25 Javascript
在Vue中使用icon 字体图标的方法
Jun 14 Javascript
Angular如何由模板生成DOM树的方法
Dec 23 Javascript
JS如何寻找数组中心索引过程解析
Jun 01 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
增加反向链接的101个方法 站长推荐
2007/01/31 PHP
简单的php 验证图片生成函数
2009/05/21 PHP
Windows下XDebug 手工配置与使用说明
2010/07/11 PHP
给WordPress中的留言加上楼层号的PHP代码实例
2015/12/14 PHP
php+MySql实现登录系统与输出浏览者信息功能
2016/07/01 PHP
thinkphp中U方法按路由规则生成url的方法
2018/03/12 PHP
javascript入门·图片对象(无刷新变换图片)\滚动图像
2007/10/01 Javascript
用jquery与css打造个性化的单选框和复选框
2010/10/20 Javascript
父子窗体间传递JSON格式的数据的代码
2010/12/25 Javascript
JS格式化数字保留两位小数点示例代码
2013/10/15 Javascript
avascript中的自执行匿名函数应用示例
2014/09/15 Javascript
JS中产生标识符方式的演变
2015/06/12 Javascript
jQuery基础_入门必看知识点
2016/07/04 Javascript
Angular.js之作用域scope'@','=','&amp;'实例详解
2017/02/28 Javascript
Node.js实现文件上传的示例
2017/06/28 Javascript
解决ztree搜索中多级菜单展示不全问题
2017/07/05 Javascript
在vue中使用echarts图表实例代码详解
2018/10/22 Javascript
帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)
2019/08/23 Javascript
vue打包通过image-webpack-loader插件对图片压缩优化操作
2020/11/12 Javascript
[19:15]DK战队纪录片
2014/09/02 DOTA
Python实现树莓派WiFi断线自动重连的实例代码
2017/03/16 Python
老生常谈Python进阶之装饰器
2017/05/11 Python
python使用pil进行图像处理(等比例压缩、裁剪)实例代码
2017/12/11 Python
Pandas之drop_duplicates:去除重复项方法
2018/04/18 Python
python自动登录12306并自动点击验证码完成登录的实现源代码
2018/04/25 Python
使用python telnetlib批量备份交换机配置的方法
2019/07/25 Python
python爬虫 模拟登录人人网过程解析
2019/07/31 Python
python+selenium select下拉选择框定位处理方法
2019/08/24 Python
Pytorch 实现冻结指定卷积层的参数
2020/01/06 Python
如何在 Django 模板中输出 &quot;{{&quot;
2020/01/24 Python
美国批发零售网站:GearXS
2016/07/26 全球购物
英国虚拟主机服务商:eUKhost
2016/08/16 全球购物
美国在线奢侈品寄售商店:Luxury Garage Sale
2018/08/19 全球购物
怎样自定义一个异常类
2016/09/27 面试题
暑假学习心得体会
2014/09/02 职场文书
MySQL为数据表建立索引的原则详解
2022/03/03 MySQL