用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 相关文章推荐
filters.revealTrans.Transition使用方法小结
Aug 19 Javascript
JS下拉缓冲菜单示例代码
Aug 30 Javascript
js跳转页面方法总结
Jan 29 Javascript
JavaScript中Cookies的相关使用教程
Jun 04 Javascript
JS实现的竖向折叠菜单代码
Oct 21 Javascript
深入探讨前端框架react
Dec 09 Javascript
jQuery 跨域访问解决原理案例详解
Jul 09 Javascript
AngularJS动态菜单操作指令
Apr 25 Javascript
Vue.js学习教程之列表渲染详解
May 17 Javascript
Node.js中流(stream)的使用方法示例
Jul 16 Javascript
Vue.js进阶知识点总结
Apr 01 Javascript
JavaScript代码模拟鼠标自动点击事件示例
Aug 07 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开发中常用的三个表单验证函数使用小结
2010/03/03 PHP
php 中文字符入库或显示乱码问题的解决方法
2010/04/12 PHP
php URL验证正则表达式
2011/07/19 PHP
使用phpQuery采集网页的方法
2013/11/13 PHP
php中strtotime函数性能分析
2016/11/20 PHP
javascript IE中的DOM ready应用技巧
2008/07/23 Javascript
Mootools 1.2教程 类(一)
2009/09/15 Javascript
JavaScript 学习笔记(十六) js事件
2010/02/01 Javascript
通过jquery还原含有rowspan、colspan的table的实现方法
2012/02/10 Javascript
javascript 兼容所有浏览器的DOM扩展功能
2012/08/01 Javascript
Javascript仿PHP $_GET获取URL中的参数
2014/05/12 Javascript
点击A元素触发B元素的事件在IE8下会识别成A元素
2014/09/04 Javascript
使用js画图之画切线
2015/01/12 Javascript
js实现超酷的照片墙展示效果图附源码下载
2015/10/08 Javascript
学习javascript的闭包,原型,和匿名函数之旅
2015/10/18 Javascript
Bootstrap缩略图的创建方法
2017/03/22 Javascript
JavaScript实现分页效果
2017/03/28 Javascript
Easyui在treegrid添加控件的实现方法
2017/06/23 Javascript
vue2.0 better-scroll 实现移动端滑动的示例代码
2018/01/25 Javascript
浅析js中mvvm模式实现的原理
2018/10/06 Javascript
jquery实现Ajax请求的几种常见方式总结
2019/05/28 jQuery
python optparse模块使用实例
2015/04/09 Python
Python中pip安装非PyPI官网第三方库的方法
2015/06/02 Python
编写自定义的Django模板加载器的简单示例
2015/07/21 Python
[原创]windows下Anaconda的安装与配置正解(Anaconda入门教程)
2018/04/05 Python
python实现自主查询实时天气
2018/06/22 Python
python学生管理系统学习笔记
2019/03/19 Python
Python实现微信小程序支付功能
2019/07/25 Python
韩国三星旗下的一家超市连锁店:Home Plus
2016/07/30 全球购物
adidas美国官网:adidas US
2016/09/21 全球购物
世界上最大的巴士旅游观光公司:Big Bus Tours
2016/10/20 全球购物
在C语言中实现抽象数据类型什么方法最好
2014/06/26 面试题
计算机专业毕业生求职信分享
2013/12/24 职场文书
高中生操行评语大全
2014/04/25 职场文书
2014年圣诞节寄语
2014/12/08 职场文书
公司感谢信范文
2015/01/22 职场文书