用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 相关文章推荐
JS解密入门 最终变量劫持
Jun 25 Javascript
JavaScript库 开发规则
Jan 31 Javascript
自己写的兼容ie和ff的在线文本编辑器类似ewebeditor
Dec 12 Javascript
js实现点击注册按钮开始读秒倒计时的小例子
May 11 Javascript
js向上无缝滚动,网站公告效果 具体代码
Nov 18 Javascript
js实现的二级横向菜单条实例
Aug 22 Javascript
50 个 jQuery 插件可将你的网站带到另外一个高度
Apr 26 Javascript
AngularJS入门教程之MVC架构实例分析
Nov 01 Javascript
Node.js中的http请求客户端示例(request client)
May 04 Javascript
VUE 更好的 ajax 上传处理 axios.js实现代码
May 10 Javascript
微信小程序开发的基本流程步骤
Jan 31 Javascript
Vue通过WebSocket建立长连接的实现代码
Nov 05 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 md5下16位和32位的实现代码
2008/04/09 PHP
限制ckeditor上传图片文件大小的方法
2013/11/15 PHP
PHP抓取网页、解析HTML常用的方法总结
2015/07/01 PHP
php 删除一维数组中某一个值元素的操作方法
2018/02/01 PHP
php面试中关于面向对象的相关问题
2019/02/13 PHP
javascript使用eval或者new Function进行语法检查
2010/10/16 Javascript
js中将字符串转换成json的三种方式
2011/01/12 Javascript
addEventListener和attachEvent二者绑定的执行函数中的this不相同
2012/12/09 Javascript
js 通过html()及text()方法获取并设置p标签的显示值
2014/05/14 Javascript
浅谈javascript中的DOM方法
2015/07/16 Javascript
JS实现的通用表单验证插件完整实例
2015/08/20 Javascript
基于Jquery制作图片文字排版预览效果附源码下载
2015/11/18 Javascript
JavaScript、jQuery与Ajax的关系
2016/01/24 Javascript
JQuery.validate在ie8下不支持的快速解决方法
2016/05/18 Javascript
遍历js中对象的属性和值的实例
2016/11/21 Javascript
Ionic2调用本地SQlite实例
2017/04/22 Javascript
单行 JS 实现移动端金钱格式的输入规则
2017/05/22 Javascript
Node.js如何使用Diffie-Hellman密钥交换算法详解
2017/09/05 Javascript
Three.js加载外部模型的教程详解
2017/11/10 Javascript
微信小程序6位或多位验证码密码输入框功能的实现代码
2018/05/29 Javascript
vue动态设置img的src路径实例
2018/09/18 Javascript
vue cli 3.x 项目部署到 github pages的方法
2019/04/17 Javascript
Python中os和shutil模块实用方法集锦
2014/05/13 Python
Python获取运行目录与当前脚本目录的方法
2015/06/01 Python
python 中的int()函数怎么用
2017/10/17 Python
django项目运行因中文而乱码报错的几种情况解决
2017/11/07 Python
解决Python 使用h5py加载文件,看不到keys()的问题
2019/02/08 Python
Python实现多态、协议和鸭子类型的代码详解
2019/05/05 Python
Pytorch基本变量类型FloatTensor与Variable用法
2020/01/08 Python
详解Python实现进度条的4种方式
2020/01/15 Python
巧用CSS3 border实现图片遮罩效果代码
2012/04/09 HTML / CSS
纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果
2012/12/28 HTML / CSS
十八届三中全会学习方案
2014/02/16 职场文书
会员卡清退活动总结
2014/08/27 职场文书
网吧员工管理制度
2015/08/05 职场文书
最新动漫情报:2022年7月新番定档超过30部, OVERLORD骨王第四季也在其中噢
2022/05/04 日漫