用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实现浏览器菜单命令
Sep 05 Javascript
Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法
Sep 01 Javascript
基于jQuery实现仿淘宝套餐选择插件
Mar 04 Javascript
jquery实现ajax加载超时提示的方法
Jul 23 Javascript
微信小程序商城项目之淘宝分类入口(2)
Apr 17 Javascript
原生JS实现的多个彩色小球跟随鼠标移动动画效果示例
Feb 01 Javascript
vue 指令之气泡提示效果的实现代码
Oct 18 Javascript
TypeScript基础入门教程之三重斜线指令详解
Oct 22 Javascript
Vue动态加载异步组件的方法
Nov 21 Javascript
如何为vue的项目添加单元测试
Dec 19 Javascript
JS中的算法与数据结构之常见排序(Sort)算法详解
Aug 16 Javascript
80行代码写一个Webpack插件并发布到npm
May 24 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 将逗号、空格、回车分隔的字符串转换为数组的函数
2012/06/07 PHP
php阻止页面后退的方法分享
2014/02/17 PHP
PHP使用Session遇到的一个Permission denied Notice解决办法
2014/07/30 PHP
Zend Framework动作助手FlashMessenger用法详解
2016/03/05 PHP
PHP实现表单提交时去除斜杠的方法
2016/12/26 PHP
php 人员权限管理(RBAC)实例(推荐)
2017/05/24 PHP
CSS+JS构建的图片查看器
2006/07/22 Javascript
Javascript UrlDecode函数代码
2010/01/09 Javascript
关于在IE下的一个安全BUG --可用于跟踪用户的系统鼠标位置
2013/04/17 Javascript
jQuery自动切换/点击切换选项卡效果的小例子
2013/08/12 Javascript
HTML页面弹出居中可拖拽的自定义窗口层
2014/05/07 Javascript
基于JS实现简单的样式切换效果代码
2015/09/04 Javascript
详解Angular2响应式表单
2017/06/14 Javascript
js实现1,2,3,5数字按照概率生成
2017/09/12 Javascript
详解JS构造函数中this和return
2017/09/16 Javascript
javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
2020/04/12 Javascript
angularjs实现对表单输入改变的监控(ng-change和watch两种方式)
2018/08/29 Javascript
Vue 动态组件components和v-once指令的实现
2019/08/30 Javascript
Layui选项卡制作历史浏览记录的方法
2019/09/28 Javascript
python通过文件头判断文件类型
2015/10/30 Python
python创建文件备份的脚本
2018/09/11 Python
tensorflow 初始化未初始化的变量实例
2020/02/06 Python
ALLSAINTS英国官网:伦敦新锐潮流品牌
2016/09/19 全球购物
美国顶级奢侈茶:Mighty Leaf Tea(美泰茶)
2016/11/26 全球购物
乌克兰第一的珠宝网上商店:Gold.ua
2019/11/29 全球购物
学生会主席事迹材料
2014/01/28 职场文书
班长竞选演讲稿
2014/04/24 职场文书
医学求职信
2014/05/28 职场文书
企业宗旨标语
2014/06/10 职场文书
教师节活动总结
2014/08/29 职场文书
党建工作整改措施
2014/10/28 职场文书
财务工作检讨书
2014/10/29 职场文书
业务员岗位职责范本
2015/04/03 职场文书
八年级语文教学反思
2016/03/03 职场文书
golang elasticsearch Client的使用详解
2021/05/05 Golang
Python调用腾讯API实现人脸身份证比对功能
2022/04/04 Python