用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通过Ajax方式来提交Form表单的具体实现
Nov 07 Javascript
javascript数字时钟示例分享
Apr 23 Javascript
JavaScript获取路径设计源码
May 22 Javascript
javascript电商网站抢购倒计时效果实现
Nov 19 Javascript
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
May 08 jQuery
jQuery绑定事件方法及区别(bind,click,on,live,one)
Aug 14 jQuery
IntersectionObserver实现图片懒加载的示例
Sep 29 Javascript
vue移动端UI框架实现QQ侧边菜单组件
Mar 09 Javascript
jQuery实现input[type=file]多图预览上传删除等功能
Aug 02 jQuery
Layui 带多选框表格监听事件以及按钮自动点击写法实例
Sep 02 Javascript
Vue中使用JsonView来展示Json树的实例代码
Nov 16 Javascript
Vue 3自定义指令开发的相关总结
Jan 29 Vue.js
静态图片的十一种滤镜效果--不支持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
递归列出所有文件和目录
2006/10/09 PHP
php字符集转换
2017/01/23 PHP
PHP如何读取由JavaScript设置的Cookie
2017/03/22 PHP
laravel框架使用FormRequest进行表单验证,验证异常返回JSON操作示例
2020/02/18 PHP
在线编辑器的实现原理(兼容IE和FireFox)
2007/03/09 Javascript
jQuery给多个不同元素添加class样式的方法
2015/03/26 Javascript
jquery实现的3D旋转木马特效代码分享
2015/08/25 Javascript
阿里巴巴技术文章分享 Javascript继承机制的实现
2016/01/14 Javascript
ClearTimeout消除闪动实例代码
2016/02/29 Javascript
限制复选框最多选择项的实现代码
2016/05/30 Javascript
ES6中的数组扩展方法
2016/08/26 Javascript
js制作网站首页图片轮播特效代码
2016/08/30 Javascript
AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法
2017/01/04 Javascript
微信小程序 动态绑定事件并实现事件修改样式
2017/04/13 Javascript
vue-cli实现多页面多路由的示例代码
2018/01/30 Javascript
AngularJS上传文件的示例代码
2018/11/10 Javascript
js计时事件实现圆形时钟
2020/03/25 Javascript
原生JS实现留言板功能
2020/02/08 Javascript
Python对文件操作知识汇总
2016/05/15 Python
Python算法之图的遍历
2017/11/16 Python
python一行sql太长折成多行并且有多个参数的方法
2018/07/19 Python
使用PM2+nginx部署python项目的方法示例
2018/11/07 Python
Python matplotlib通过plt.scatter画空心圆标记出特定的点方法
2018/12/13 Python
python3 中的字符串(单引号、双引号、三引号)以及字符串与数字的运算
2019/07/18 Python
django框架面向对象ORM模型继承用法实例分析
2019/07/29 Python
Python +Selenium解决图片验证码登录或注册问题(推荐)
2020/02/09 Python
实现ECharts双Y轴左右刻度线一致的例子
2020/05/16 Python
基于python 将列表作为参数传入函数时的测试与理解
2020/06/05 Python
德国鞋子网上商店:Omoda.de
2017/03/31 全球购物
英国领先的狗和宠物美容专家:Christies Direct
2017/04/03 全球购物
俄罗斯女装店:12storeez
2019/10/25 全球购物
人代会标语
2014/06/30 职场文书
小学生纪念九一八事变演讲稿
2014/09/14 职场文书
民事上诉状范文
2015/05/22 职场文书
《水上飞机》教学反思
2016/02/20 职场文书
Android开发实现极为简单的QQ登录页面
2022/04/24 Java/Android