用javascript动态调整iframe高度的方法


Posted in Javascript onMarch 06, 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"

Javascript 相关文章推荐
javascript qq右下角滑出窗口 sheyMsg
Mar 21 Javascript
JavaScript之自定义类型
May 04 Javascript
jQuery实现图片放大预览实现原理及代码
Sep 12 Javascript
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
ichart.js绘制虚线、平均分虚线效果的实现代码
May 05 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单
Nov 25 Javascript
node.js入门教程之querystring模块的使用方法
Feb 27 Javascript
详解angularJS动态生成的页面中ng-click无效解决办法
Jun 19 Javascript
JS面向对象之单选框实现
Jan 17 Javascript
浅析JavaScript 函数防抖和节流
Jul 13 Javascript
vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题
Jul 31 Javascript
vue中的可拖拽宽度div的实现示例
Apr 08 Vue.js
静态图片的十一种滤镜效果--不支持Ie7及非IE浏览器。
Mar 06 #Javascript
限制文本字节数js代码
Mar 06 #Javascript
用Div仿showModalDialog模式菜单的效果的代码
Mar 05 #Javascript
HTML-CSS群中单选引发的“事件”
Mar 05 #Javascript
用javascript实现页面打印的三种方法
Mar 05 #Javascript
一个可以显示阴历的JS代码
Mar 05 #Javascript
JavaScript实现Sleep函数的代码
Mar 04 #Javascript
You might like
如何使用php输出时间格式
2013/08/31 PHP
使用pthreads实现真正的PHP多线程(需PHP5.3以上版本)
2014/05/05 PHP
php中socket通信机制实例详解
2015/01/03 PHP
php实现的用户查询类实例
2015/06/18 PHP
javascript编程起步(第一课)
2007/01/10 Javascript
juqery 学习之五 文档处理 插入
2011/02/11 Javascript
给页面渲染时间加速 干掉Dom Level 0 Event
2012/12/19 Javascript
jQuery easyui datagrid动态查询数据实例讲解
2013/02/26 Javascript
浅析JavaScript中的CSS属性及命名规范
2013/11/28 Javascript
JS删除字符串中重复字符方法
2014/03/09 Javascript
js获取视频时长代码
2014/04/10 Javascript
2014年最火的Node.JS后端框架推荐
2014/10/27 Javascript
JavaScript实现防止网页被嵌入Frame框架的代码分享
2014/12/29 Javascript
JavaScript DOM进阶方法
2015/04/13 Javascript
EasyUI学习之Combobox级联下拉列表(2)
2016/12/29 Javascript
微信小程序实现流程进度的图样式功能
2018/01/16 Javascript
浅谈AngularJS中$http服务的简单用法
2018/05/15 Javascript
Angularjs实现数组随机排序的方法
2018/10/02 Javascript
为什么说JavaScript预解释是一种毫无节操的机制详析
2018/11/18 Javascript
深入理解Antd-Select组件的用法
2020/02/25 Javascript
vue 使用post/get 下载导出文件操作
2020/08/07 Javascript
[52:22]EG vs VG Supermajor小组赛B组 BO3 第一场 6.2
2018/06/03 DOTA
python实现sublime3的less编译插件示例
2014/04/27 Python
python实现跨文件全局变量的方法
2014/07/07 Python
推荐11个实用Python库
2015/01/23 Python
快速了解Python开发中的cookie及简单代码示例
2018/01/17 Python
python读取mysql数据绘制条形图
2020/03/25 Python
纯css3无js实现的Android Logo(有简单动画)
2013/01/21 HTML / CSS
移动端Web页面的CSS3 flex布局快速上手指南
2016/05/31 HTML / CSS
美国电力供应商店/电气批发商:USESI
2018/10/12 全球购物
英国独特家具和家庭用品购物网站:Cuckooland
2020/08/30 全球购物
工程预算与管理应届生求职信
2013/10/06 职场文书
公司中秋节活动方案
2014/02/12 职场文书
好人好事新闻稿
2015/07/17 职场文书
2016年度农村党员干部主题教育活动总结
2016/04/06 职场文书
CentOS下安装Jenkins的完整步骤
2022/04/07 Servers