用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 相关文章推荐
基于JQuery的Pager分页器实现代码
Jul 17 Javascript
高亮显示web页表格行的javascript代码
Nov 19 Javascript
基于jquery的文本框与autocomplete结合使用(asp.net+json)
May 30 Javascript
22点关于jquery性能优化的建议
May 28 Javascript
jQuery窗口、文档、网页各种高度的精确理解
Jul 02 Javascript
JavaScript的Date()方法使用详解
Jun 09 Javascript
jQuery实现无限往下滚动效果代码
Apr 16 Javascript
jQuery图片轮播插件——前端开发必看
May 31 Javascript
Angular事件之不同组件间传递数据的方法
Nov 15 Javascript
JavaScript 浏览器对象模型BOM原理与常见用法实例分析
Dec 16 Javascript
JavaScript复制变量三种方法实例详解
Jan 09 Javascript
extjs图形绘制之饼图实现方法分析
Mar 06 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
ajax缓存问题解决途径
2006/12/06 PHP
php 分页原理详解
2009/08/21 PHP
PHP Class&amp;Object -- PHP 自排序二叉树的深入解析
2013/06/25 PHP
PHP+Ajax实时自动检测是否联网的方法
2015/07/01 PHP
Symfony2框架学习笔记之HTTP Cache用法详解
2016/03/18 PHP
Laravel框架处理用户的请求操作详解
2019/12/20 PHP
JavaScript 学习笔记(十二) dom
2010/01/21 Javascript
常用的jquery模板插件——jQuery Boilerplate介绍
2014/09/23 Javascript
javascript闭包的理解
2015/04/01 Javascript
Jquery中request和request.form和request.querystring的区别
2015/11/26 Javascript
js验证真实姓名与身份证号,手机号的简单实例
2016/07/18 Javascript
jQuery删除节点用法示例(remove方法)
2016/09/08 Javascript
jQuery异步提交表单的两种方式
2016/09/13 Javascript
jQuery实现的浮动层div浏览器居中显示效果
2017/02/03 Javascript
js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能
2018/01/09 Javascript
Webpack的dll功能使用
2018/06/28 Javascript
React Native基础入门之初步使用Flexbox布局
2018/07/02 Javascript
Vue2.0学习系列之项目上线的方法步骤(图文)
2018/09/25 Javascript
VUE+Element UI实现简单的表格行内编辑效果的示例的代码
2018/10/31 Javascript
vue组件添加事件@click.native操作
2020/10/30 Javascript
解决Vue大括号字符换行踩的坑
2020/11/09 Javascript
详解uniapp的全局变量实现方式
2021/01/11 Javascript
[01:06:18]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第二场 1月26日
2021/03/11 DOTA
Python兔子毒药问题实例分析
2015/03/05 Python
使用matplotlib画散点图的方法
2018/05/25 Python
简单了解python的break、continue、pass
2019/07/08 Python
Python openpyxl模块原理及用法解析
2020/01/19 Python
python 截取XML中bndbox的坐标中的图像,另存为jpg的实例
2020/03/10 Python
命名空间(namespace)和程序集(Assembly)有什么区别
2015/09/25 面试题
土木工程毕业生自荐信
2013/11/12 职场文书
学习经验交流会主持词
2014/04/01 职场文书
企业党的群众路线教育实践活动学习心得体会
2014/10/31 职场文书
2015年酒店服务员工作总结
2015/05/18 职场文书
2016教师暑期培训学习心得体会
2016/01/09 职场文书
React列表栏及购物车组件使用详解
2021/06/28 Javascript
python编程学习使用管道Pipe编写优化代码
2021/11/20 Python