用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 AjaxQueue改进步骤
Oct 06 Javascript
jQuery/CSS3图片特效插件整理推荐
Dec 07 Javascript
node.js中的fs.realpathSync方法使用说明
Dec 16 Javascript
基于jQuery实现的旋转彩圈实例
Jun 26 Javascript
简单解析JavaScript中的__proto__属性
May 10 Javascript
JavaScript判断用户名和密码不能为空的实现代码
May 16 Javascript
利用Node.js制作爬取大众点评的爬虫
Sep 22 Javascript
JS实现的验证身份证及获取地区功能示例
Jan 16 Javascript
javascript自执行函数
Feb 10 Javascript
JavaScript实现自动跳转文本功能
May 25 Javascript
详解vue项目接入微信JSSDK的坑
Dec 14 Javascript
vue多页面项目中路由使用history模式的方法
Sep 23 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安装imagick时出现Cannot locate header file MagickWand.h错误的解决方法
2014/11/03 PHP
PHP读取CURL模拟登录时生成Cookie文件的方法
2014/11/04 PHP
smarty内置函数config_load用法实例
2015/01/22 PHP
PHP实现递归无限级分类
2015/10/22 PHP
PHP __call()方法实现委托示例
2019/05/20 PHP
javascript数组组合成字符串的脚本
2021/01/06 Javascript
javascript显示隐藏层比较不错的方法分析
2008/09/30 Javascript
js获取窗口相对于屏幕左边和上边的位置坐标
2014/05/15 Javascript
JavaScript中连接操作Oracle数据库实例
2015/04/02 Javascript
浅谈Node.js中的定时器
2015/06/18 Javascript
jquery实现Slide Out Navigation滑出式菜单效果代码
2015/09/07 Javascript
JavaScript Promise 用法
2016/06/14 Javascript
javascript使用 concat 方法对数组进行合并的方法
2016/09/08 Javascript
浅入深出Vue之组件使用
2019/07/11 Javascript
vue调用语音播放的方法
2019/09/27 Javascript
Layui选项卡制作历史浏览记录的方法
2019/09/28 Javascript
JavaScript适配器模式原理与用法实例详解
2020/03/09 Javascript
js面向对象方式实现拖拽效果
2021/03/03 Javascript
在Python的Flask框架下收发电子邮件的教程
2015/04/21 Python
python 写的一个爬虫程序源码
2016/02/28 Python
Python Flask前后端Ajax交互的方法示例
2018/07/31 Python
Python Django 简单分页的实现代码解析
2019/08/21 Python
Python生成词云的实现代码
2020/01/14 Python
40个你可能不知道的Python技巧附代码
2020/01/29 Python
美国美妆网站:B-Glowing
2016/10/12 全球购物
澳大利亚小众服装品牌:Maurie & Eve
2018/03/27 全球购物
简历自我评价怎么写呢?
2014/01/06 职场文书
一年级数学教学反思
2014/02/01 职场文书
人力资源管理专业自荐书范文
2014/02/10 职场文书
小学班主任评语大全
2014/04/23 职场文书
2014年党员自我剖析材料
2014/10/07 职场文书
邀请书格式范文
2015/02/02 职场文书
爱心捐书倡议书
2015/04/27 职场文书
2019年学校消防安全责任书(2篇)
2019/10/09 职场文书
教你如何使用Python实现二叉树结构及三种遍历
2021/06/18 Python
ORM模型框架操作mysql数据库的方法
2021/07/25 MySQL