用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实现Sleep暂停功能代码
Sep 03 Javascript
关于js中window.location.href,location.href,parent.location.href,top.location.href的用法与区别
Oct 18 Javascript
把jquery 的dialog和ztree结合实现步骤
Aug 02 Javascript
禁止IE用右键的JS代码
Dec 30 Javascript
百度地图自定义控件分享
Mar 04 Javascript
解决js函数闭包内存泄露问题的办法
Jan 25 Javascript
使用JS代码实现点击按钮下载文件
Nov 12 Javascript
JavaScript基础之this详解
Jun 04 Javascript
详解webpack3如何正确引用并使用jQuery库
Aug 26 jQuery
node.js文件上传重命名以及移动位置的示例代码
Jan 19 Javascript
原生js+ajax分页组件
Jan 30 Javascript
vue 动态组件用法示例小结
Mar 06 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
3
2006/10/09 PHP
PHP中set error handler函数用法小结
2015/11/11 PHP
PHP实现链表的定义与反转功能示例
2018/06/09 PHP
几个常用的JavaScript字符串处理函数 - split()、join()、substring()和indexOf()
2009/06/02 Javascript
理解Javascript_06_理解对象的创建过程
2010/10/15 Javascript
快速排序 php与javascript的不同之处
2011/02/22 Javascript
JavaScript中函数声明优先于变量声明的实例分析
2012/03/01 Javascript
基于jquery的不规则矩形的排列实现代码
2012/04/16 Javascript
TextArea设置MaxLength属性最大输入值的js代码
2012/12/21 Javascript
解析Javascript中难以理解的11个问题
2013/12/09 Javascript
jquery实现当滑动到一定位置时固定效果
2014/06/17 Javascript
基于replaceChild制作简单的吞噬特效
2015/09/21 Javascript
浅谈javascript的url参数parse和build函数
2017/03/04 Javascript
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
2018/08/16 Javascript
Vue.js 父子组件通信的十种方式
2018/10/30 Javascript
详解用Webpack与Babel配置ES6开发环境
2019/03/12 Javascript
JavaScript实现身份证验证代码实例
2019/08/26 Javascript
vue-autoui自匹配webapi的UI控件的实现
2020/03/20 Javascript
小程序实现图片移动缩放效果
2020/05/26 Javascript
[57:18]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#3VP VS VG
2016/03/03 DOTA
分享Python文本生成二维码实例
2016/01/06 Python
详解python之多进程和进程池(Processing库)
2017/06/09 Python
Python切片工具pillow用法示例
2018/03/30 Python
Pytorch实现GoogLeNet的方法
2019/08/18 Python
python中翻译功能translate模块实现方法
2020/12/17 Python
高中生毕业学习总结的自我评价
2013/11/14 职场文书
运动会稿件200字
2014/02/07 职场文书
社区消防工作实施方案
2014/03/21 职场文书
《将心比心》教学反思
2014/04/08 职场文书
希特勒的演讲稿
2014/05/23 职场文书
公安派出所所长四风问题个人对照检查材料
2014/10/04 职场文书
小学四年级学生评语
2014/12/26 职场文书
水浒传读书笔记
2015/06/25 职场文书
2015初一年级组工作总结
2015/07/24 职场文书
《颐和园》教学反思
2016/02/19 职场文书
HTML5 语义化标签(移动端必备)
2021/08/23 HTML / CSS