用javascript动态调整iframe高度的代码


Posted in Javascript onApril 10, 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" 
width=200 height=100></iframe>

Javascript 相关文章推荐
jQuery 瀑布流 绝对定位布局(二)(延迟AJAX加载图片)
May 23 Javascript
js创建子窗口并且回传值示例代码
Jul 02 Javascript
向左滚动文字 js代码效果
Aug 17 Javascript
JS 数字转换研究总结
Dec 26 Javascript
使用jspdf生成pdf报表
Jul 03 Javascript
JS折半插入排序算法实例
Dec 02 Javascript
jquery淡入淡出效果简单实例
Jan 14 Javascript
jQuery插件pagination实现无刷新分页
May 21 Javascript
全面了解JS中的匿名函数
Jun 29 Javascript
Bootstrap模态框禁用空白处点击关闭
Oct 20 Javascript
node.js中使用Export和Import的方法
Sep 18 Javascript
js传递数组参数到后台controller的方法
Mar 29 Javascript
Javascript下的keyCode键码值表
Apr 10 #Javascript
用javascript控制iframe滚动的代码
Apr 10 #Javascript
经常用到的JavasScript事件的翻译
Apr 09 #Javascript
在JavaScript中通过URL传递汉字的方法
Apr 09 #Javascript
Javascript中eval函数的使用方法与示例
Apr 09 #Javascript
给网站上的广告“加速”显示的方法
Apr 08 #Javascript
超级简单的图片防盗(HTML),好用
Apr 08 #Javascript
You might like
在PHP中利用XML技术构造远程服务(上)
2006/10/09 PHP
一个简洁实用的PHP缓存类完整实例
2014/07/26 PHP
详解WordPress开发中过滤属性以及Sql语句的函数使用
2015/12/25 PHP
php使用GD2绘制几何图形示例
2017/02/15 PHP
php写一个函数,实现扫描并打印出自定目录下(含子目录)所有jpg文件名
2017/05/26 PHP
php传值和传引用的区别点总结
2019/11/19 PHP
Jquery实现无刷新DropDownList联动实现代码
2010/03/08 Javascript
利用jQuery的deferred对象实现异步按顺序加载JS文件
2013/03/17 Javascript
Javascript级联下拉菜单以及AJAX数据验证核心代码
2013/05/10 Javascript
node.js中的url.resolve方法使用说明
2014/12/10 Javascript
星期几的不同脚本写法(推荐)
2016/06/01 Javascript
Angularjs实现分页和分页算法的示例代码
2016/12/23 Javascript
canvas时钟效果
2017/02/16 Javascript
NodeJS实现图片上传代码(Express)
2017/06/30 NodeJs
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
2017/08/01 jQuery
详解webpack2+node+react+babel实现热加载(hmr)
2017/08/24 Javascript
Mac中安装nvm的教程分享
2017/12/11 Javascript
Element实现表格分页数据选择+全选所有完善批量操作
2019/06/07 Javascript
微信小程序音乐播放器开发
2019/11/20 Javascript
ES5新增数组的实现方法
2020/05/12 Javascript
javascript实现滚轮轮播图片
2020/12/13 Javascript
[06:24]DOTA2 2015国际邀请赛中国区预选赛第二日TOP10
2015/05/27 DOTA
python抓取网页图片并放到指定文件夹
2014/04/24 Python
跟老齐学Python之有点简约的元组
2014/09/24 Python
用Python编写一个国际象棋AI程序
2014/11/28 Python
Python MySQLdb Linux下安装笔记
2015/05/09 Python
Python简单定义与使用字典dict的方法示例
2017/07/25 Python
python编程实现随机生成多个椭圆实例代码
2018/01/03 Python
基于django传递数据到后端的例子
2019/08/16 Python
Django框架反向解析操作详解
2019/11/28 Python
python2 对excel表格操作完整示例
2020/02/23 Python
如何通过python实现IOU计算代码实例
2020/11/02 Python
python-图片流传输的思路及示例(url转换二维码)
2020/12/21 Python
不同浏览器对CSS3和HTML5的支持状况
2009/10/31 HTML / CSS
Bloomingdale’s阿联酋:选购奢华时尚、美容及更多
2020/09/22 全球购物
2015年美容师个人工作总结
2015/10/14 职场文书