用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 相关文章推荐
10个实用的脚本代码工具
May 04 Javascript
Array 重排序方法和操作方法的简单实例
Jan 24 Javascript
深入理解javascript作用域和闭包
Sep 23 Javascript
js中遍历Map对象的方法
Jul 27 Javascript
AngularJS 过滤与排序详解及实例代码
Sep 14 Javascript
Angular.JS通过指令操作DOM的方法
May 10 Javascript
JS/HTML5游戏常用算法之碰撞检测 像素检测算法实例详解
Dec 12 Javascript
微信小程序实现判断是分享到群还是个人功能示例
May 03 Javascript
vue+element表格导出为Excel文件
Sep 26 Javascript
js使用文档就绪函数动态改变页面内容示例【innerHTML、innerText】
Nov 07 Javascript
JavaScript实现轮播图片完整代码
Mar 07 Javascript
JavaScript常用8种数组去重代码实例
Sep 09 Javascript
静态图片的十一种滤镜效果--不支持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数组转换js数组操作及json_encode的用法详解
2013/10/26 PHP
PHP数据库链接类(PDO+Access)实例分享
2013/12/05 PHP
PHP下通过QRCode类库创建中间带网站LOGO的二维码
2014/07/12 PHP
PHP大文件切割上传并带进度条功能示例
2019/07/01 PHP
JavaScript对象模型-执行模型
2008/04/28 Javascript
input 高级限制级用法
2009/03/26 Javascript
js 加载并解析XML字符串的代码
2009/12/13 Javascript
疯狂Jquery第一天(Jquery学习笔记)
2012/05/11 Javascript
整理的比较全的event对像在ie与firefox浏览器中的区别
2013/11/25 Javascript
javascript如何动态加载表格与动态添加表格行
2013/11/27 Javascript
JavaScript中的toLocaleDateString()方法使用简介
2015/06/12 Javascript
详解JavaScript中的客户端消息框架设计原理
2015/06/24 Javascript
深入探秘jquery瀑布流的实现
2016/01/30 Javascript
JS生成不重复的随机数组的简单实例
2016/07/10 Javascript
jQuery Ajax Post 回调函数不执行问题的解决方法
2016/08/15 Javascript
jquery easyui dataGrid动态改变排序字段名的方法
2017/03/02 Javascript
Angular2使用Angular CLI快速搭建工程(一)
2017/05/21 Javascript
将 vue 生成的 js 上传到七牛的实例
2017/07/28 Javascript
es6数值的扩展方法
2019/03/11 Javascript
使用vue实现各类弹出框组件
2019/07/03 Javascript
JavaScript实现通讯录功能
2020/12/27 Javascript
零基础写python爬虫之打包生成exe文件
2014/11/06 Python
Anaconda多环境多版本python配置操作方法
2017/09/12 Python
基于Python实现的ID3决策树功能示例
2018/01/02 Python
Python操作MySQL数据库的两种方式实例分析【pymysql和pandas】
2019/03/18 Python
Python 生成VOC格式的标签实例
2020/03/10 Python
在线学习西班牙语、法语或其他语言:Babbel.com
2018/02/07 全球购物
SQL里面IN比较快还是EXISTS比较快
2012/07/19 面试题
公司前台接待岗位职责
2013/12/03 职场文书
酒店中秋节促销方案
2014/01/30 职场文书
大学毕业感言一句话
2014/02/06 职场文书
新闻编辑自荐书范文
2014/02/12 职场文书
大学生两会学习心得体会
2014/03/10 职场文书
幼儿园中班下学期评语
2014/04/18 职场文书
青年文明号口号
2014/06/17 职场文书
离婚案件上诉状
2015/05/23 职场文书