用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 相关文章推荐
JavaScript入门教程(6) Window窗口对象
Jan 31 Javascript
ExtJs扩展之GroupPropertyGrid代码
Mar 05 Javascript
JS实现仿中关村论坛评分后弹出提示效果的方法
Feb 23 Javascript
JavaScript学习笔记整理之引用类型
Jan 22 Javascript
Vue.js中用v-bind绑定class的注意事项
Dec 13 Javascript
JS奇技之利用scroll来监听resize详解
Jun 15 Javascript
浅析Vue自定义组件的v-model
Nov 26 Javascript
原生JS实现的碰撞检测功能示例
May 18 Javascript
vue+iview 实现可编辑表格的示例代码
Oct 31 Javascript
优雅的在React项目中使用Redux的方法
Nov 10 Javascript
微信小程序购物车、父子组件传值及calc的注意事项总结
Nov 14 Javascript
ES6基础之解构赋值(destructuring assignment)
Feb 21 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 变量未定义等错误的解决方法
2011/01/12 PHP
用PHP实现浏览器点击下载TXT文档的方法详解
2013/06/02 PHP
Yii输入正确验证码却验证失败的解决方法
2017/06/06 PHP
jQuery获取css z-index在各种浏览器中的返回值
2010/09/15 Javascript
javascript对下拉列表框(select)的操作实例讲解
2013/11/29 Javascript
js toFixed()方法的重写实现精度的统一
2014/03/06 Javascript
jQuery实现向下滑出的二级菜单效果实例
2015/08/22 Javascript
使用Vue.js创建一个时间跟踪的单页应用
2016/11/28 Javascript
vue.js图片转Base64上传图片并预览的实现方法
2018/08/02 Javascript
使用weixin-java-tools完成微信授权登录、微信支付的示例
2018/09/26 Javascript
vue实现的双向数据绑定操作示例
2018/12/04 Javascript
vue+elementUI组件table实现前端分页功能
2020/11/15 Javascript
小程序实现列表展开收起效果
2020/07/29 Javascript
JavaScript Array.flat()函数用法解析
2020/09/02 Javascript
vue中可编辑树状表格的实现代码
2020/10/31 Javascript
python+selenium 定位到元素,无法点击的解决方法
2019/01/30 Python
在Python中表示一个对象的方法
2019/06/25 Python
关于Python3 lambda函数的深入浅出
2019/11/27 Python
GitHub上值得推荐的8个python 项目
2020/10/30 Python
html5 localStorage本地存储_动力节点Java学院整理
2017/07/06 HTML / CSS
斐乐美国官方网站:FILA美国
2019/03/01 全球购物
NET程序员上机面试题
2015/05/23 面试题
商务英语毕业生自荐信范文
2013/11/08 职场文书
汉语言文学毕业生自荐信范文
2014/03/24 职场文书
《社戏》教学反思
2014/04/15 职场文书
小学生手册家长评语
2014/04/16 职场文书
活动总结报告怎么写
2014/07/03 职场文书
爱心捐书活动总结
2014/07/05 职场文书
企业安全生产目标责任书
2014/07/23 职场文书
群众路线个人对照检查材料2014
2014/09/26 职场文书
毕业证委托书范文
2014/09/26 职场文书
鲁迅故里导游词
2015/02/05 职场文书
工作能力自我评价2015
2015/03/05 职场文书
幼儿园开学温馨提示
2015/07/15 职场文书
Python中字符串对象语法分享
2022/02/24 Python
java开发双人五子棋游戏
2022/05/06 Java/Android