用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 相关文章推荐
firefo xml 读写实现js代码
Jun 11 Javascript
JavaScript中出现乱码的处理心得
Dec 24 Javascript
图片img的src不变让浏览器重新加载实现方法
Mar 29 Javascript
禁止iframe脚本弹出的窗口覆盖了父窗口的方法
Sep 06 Javascript
原生js和jquery实现图片轮播特效
Apr 23 Javascript
js操作数组函数实例小结
Dec 10 Javascript
浅析JavaScript Array和string的转换(推荐)
May 20 Javascript
js数组去重的hash方法
Dec 22 Javascript
JavaScript表单即时验证 验证不成功不能提交
Aug 31 Javascript
jQuery选择器之子元素过滤选择器
Sep 28 jQuery
原生JS获取元素的位置与尺寸实现方法
Oct 18 Javascript
JS实现的找零张数最小问题示例
Nov 28 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正确配置mysql(apache环境)
2011/08/28 PHP
解析:php调用MsSQL存储过程使用内置RETVAL获取过程中的return值
2013/07/03 PHP
PHP多线程类及用法实例
2014/12/03 PHP
php实现QQ空间获取当前用户的用户名并生成图片
2015/07/25 PHP
使用WAMP搭建PHP本地开发环境
2017/05/10 PHP
微信JSSDK分享功能图文实例详解
2019/04/08 PHP
漂亮的thinkphp 跳转页封装示例
2019/10/16 PHP
Laravel 实现在Blade模版中使用全局变量代替路径的例子
2019/10/22 PHP
Html中JS脚本执行顺序简单举例说明
2010/06/19 Javascript
JavaScript中数据结构与算法(五):经典KMP算法
2015/06/19 Javascript
js正则表达式注册页面表单验证
2016/10/11 Javascript
js 模仿锚点定位的实现方法
2016/11/19 Javascript
Node.js开发教程之基于OnceIO框架实现文件上传和验证功能
2016/11/30 Javascript
jquery中封装函数传递当前元素的方法示例
2017/05/05 jQuery
关于在mongoose中填充外键的方法详解
2017/08/14 Javascript
three.js实现圆柱体
2018/12/30 Javascript
vue项目中使用bpmn为节点添加颜色的方法
2020/04/30 Javascript
vue绑定class的三种方法
2020/12/24 Vue.js
原生JS运动实现轮播图
2021/01/02 Javascript
[01:13:01]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第三场
2018/04/05 DOTA
Python实现的文本编辑器功能示例
2017/06/30 Python
python递归全排列实现方法
2018/08/18 Python
python 字典的打印实现
2019/09/26 Python
如何基于Python获取图片的物理尺寸
2019/11/25 Python
Python3.7.0 Shell添加清屏快捷键的实现示例
2020/03/23 Python
Python如何合并多个字典或映射
2020/07/24 Python
python+django+selenium搭建简易自动化测试
2020/08/19 Python
python 获取域名到期时间的方法步骤
2021/02/10 Python
英国最大的线上保健品零售商之一:Vitamin Planet
2016/12/01 全球购物
以实惠的价格提供高品质的时尚:Newchic
2018/01/18 全球购物
法学函授自我鉴定
2014/02/06 职场文书
大学生个人自荐信样本
2014/03/02 职场文书
学雷锋活动倡议书
2014/08/30 职场文书
酒店工程部岗位职责
2015/02/12 职场文书
董事会决议范本
2015/07/01 职场文书
实习感想范文
2015/08/10 职场文书