用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 相关文章推荐
几个高效,简洁的字符处理函数
Apr 12 Javascript
日期 时间js控件
May 07 Javascript
jquery鼠标滑过提示title具体实现代码
Aug 06 Javascript
js中创建对象的几种方式示例介绍
Jan 26 Javascript
JS中怎样判断undefined(比较不错的方法)
Mar 27 Javascript
使用FlexiGrid实现Extjs表格效果方法分享
Dec 16 Javascript
详细解读Jquery各Ajax函数($.get(),$.post(),$.ajax(),$.getJSON())
Aug 15 Javascript
JS实现搜索框文字可删除功能
Dec 28 Javascript
用move.js库实现百叶窗特效
Feb 08 Javascript
Angularjs中的验证input输入框只能输入数字和小数点的写法(推荐)
Aug 16 Javascript
vue绑定class与行间样式style详解
Aug 16 Javascript
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
Apr 17 jQuery
静态图片的十一种滤镜效果--不支持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
mysql5写入和读出乱码解决
2006/11/25 PHP
discuz authcode 经典php加密解密函数解析
2020/07/12 PHP
如何利用PHP执行.SQL文件
2013/07/05 PHP
php使用for语句输出三角形的方法
2015/06/09 PHP
PHP.vs.JAVA
2016/04/29 PHP
详解php curl带有csrf-token验证模拟提交方法
2018/04/18 PHP
javascript中的new使用
2010/03/20 Javascript
IE6 fixed的完美解决方案
2011/03/31 Javascript
在IE和VB中支持png图片透明效果的实现方法(vb源码打包)
2011/04/01 Javascript
js实现浏览器的各种菜单命令比如打印、查看源文件等等
2013/10/24 Javascript
js替代copy(示例代码)
2013/11/27 Javascript
Javascript URI 解析介绍
2015/03/15 Javascript
Jquery中的$.each获取各种返回类型数据的使用方法
2015/05/03 Javascript
React Native中TabBarIOS的简单使用方法示例
2017/10/13 Javascript
微信小程序实现列表下拉刷新上拉加载
2020/07/29 Javascript
express默认日志组件morgan的方法
2018/04/05 Javascript
jQuery实现获取选中复选框的值实例详解
2018/06/28 jQuery
vue微信分享出来的链接点开是首页问题的解决方法
2018/11/28 Javascript
Vue使用Clipboard.JS在h5页面中复制内容实例详解
2019/09/03 Javascript
python的tkinter布局之简单的聊天窗口实现方法
2014/09/03 Python
Python中使用partial改变方法默认参数实例
2015/04/28 Python
Python把csv数据写入list和字典类型的变量脚本方法
2018/06/15 Python
详解使用PyInstaller将Pygame库编写的小游戏程序打包为exe文件
2019/08/23 Python
Python lambda表达式filter、map、reduce函数用法解析
2019/09/11 Python
Python Numpy 控制台完全输出ndarray的实现
2020/02/19 Python
Python多线程正确用法实例解析
2020/05/30 Python
win10下python3.8的PIL库安装过程
2020/06/08 Python
python excel和yaml文件的读取封装
2021/01/12 Python
Bose美国官网:购买Bose耳机和音箱
2019/03/10 全球购物
小学教师事迹材料
2014/01/13 职场文书
2015年小学数学教师个人工作总结
2015/05/25 职场文书
实验心得体会范文
2016/01/25 职场文书
Python中Cookies导出某站用户数据的方法
2021/05/17 Python
element多个表单校验的实现
2021/05/27 Javascript
python中的getter与setter你了解吗
2022/03/24 Python
volatile保证可见性及重排序方法
2022/08/05 Java/Android