用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 相关文章推荐
node.js中的path.join方法使用说明
Dec 08 Javascript
AngularJS 实现按需异步加载实例代码
Oct 18 Javascript
javascript中的altKey 和 Event属性大全
Nov 06 Javascript
jquery mobile开发常见问题分析
Jan 21 Javascript
实用jquery操作表单元素的简单代码
Jul 04 Javascript
JS生成和下载二维码的代码
Dec 07 Javascript
详解为Bootstrap Modal添加拖拽的方法
Jan 05 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(下)
Apr 18 Javascript
vue this.reload 方法 配置
Sep 12 Javascript
javascript+Canvas实现画板功能
Jun 23 Javascript
vant中的toast层级改变操作
Nov 04 Javascript
JS前端基于canvas给图片添加水印
Nov 11 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
php将fileterms函数返回的结果变成可读的形式
2011/04/21 PHP
php中对2个数组相加的函数
2011/06/24 PHP
php使用post数组的键值创建同名变量并赋值的方法
2015/04/03 PHP
微信 getAccessToken方法详解及实例
2016/11/23 PHP
深入解析PHP中SESSION反序列化机制
2017/03/01 PHP
权威JavaScript 中的内存泄露模式
2007/08/13 Javascript
jQuery如何实现点击页面获得当前点击元素的id或其他信息
2014/01/09 Javascript
json的定义、标准格式及json字符串检验
2014/05/11 Javascript
html文档中的location对象属性理解及常见的用法
2014/08/13 Javascript
JavaScript常用的弹出广告及背投广告实现方法
2015/02/06 Javascript
JavaScript实现实时更新系统时间的实例代码
2017/04/04 Javascript
vue 中引用gojs绘制E-R图的方法示例
2018/08/24 Javascript
vue-cli 3.x配置跨域代理的实现方法
2019/04/12 Javascript
js数据类型转换与流程控制操作实例分析
2019/12/18 Javascript
微信小程序封装多张图片上传api代码实例
2019/12/30 Javascript
详解Vue串联过滤器的使用场景
2020/04/30 Javascript
解决VUEX的mapState/...mapState等取值问题
2020/07/24 Javascript
如何实现小程序与小程序之间的跳转
2020/11/04 Javascript
python中的多重继承实例讲解
2014/09/28 Python
python操作ie登陆土豆网的方法
2015/05/09 Python
Django数据库表反向生成实例解析
2018/02/06 Python
python 对多个csv文件分别进行处理的方法
2019/01/07 Python
python 实现二维字典的键值合并等函数
2019/12/06 Python
Django 自定义权限管理系统详解(通过中间件认证)
2020/03/11 Python
Django media static外部访问Django中的图片设置教程
2020/04/07 Python
Python实现加密接口测试方法步骤详解
2020/06/05 Python
解决TensorFlow程序无限制占用GPU的方法
2020/06/30 Python
css3 column实现卡片瀑布流布局的示例代码
2018/06/22 HTML / CSS
深入浅析CSS3中的Flex布局整理
2020/04/27 HTML / CSS
HTML5到底会有什么发展?HTML5的前景展望
2015/07/07 HTML / CSS
橄榄树药房:OLIVEDA
2019/09/01 全球购物
大学生入党推荐书范文
2014/05/17 职场文书
挂职锻炼个人总结
2015/03/05 职场文书
出纳试用期自我评价
2015/03/10 职场文书
详解MySQL中的pid与socket
2021/06/15 MySQL
Python实现灰色关联分析与结果可视化的详细代码
2022/03/25 Python