用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 相关文章推荐
来自国外的14个图片放大编辑的jQuery插件整理
Oct 20 Javascript
jQuery javaScript捕获回车事件(示例代码)
Nov 07 Javascript
JS数组的赋值介绍
Mar 10 Javascript
jQuery异步验证用户名是否存在示例代码
May 21 Javascript
关于JavaScript命名空间的一些心得
Jun 07 Javascript
JavaScript的Number对象的toString()方法
Dec 18 Javascript
JS+CSS实现下拉刷新/上拉加载插件
Mar 31 Javascript
vue 过滤器filter实例详解
Mar 14 Javascript
ES6使用export和import实现模块化的方法
Sep 10 Javascript
使用jQuery动态设置单选框的选中效果
Dec 06 jQuery
深入探索VueJS Scoped CSS 实现原理
Sep 23 Javascript
JS如何实现基于websocket的多端桥接平台
May 14 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
在VS2008中编译MYSQL5.1.48的方法
2010/07/03 PHP
PHP连接SQLServer2005的方法
2015/01/27 PHP
DEFER怎么用?
2006/07/01 Javascript
csdn 论坛技术区平均给分功能
2009/11/07 Javascript
IE8下关于querySelectorAll()的问题
2010/05/13 Javascript
node.js中的console.log方法使用说明
2014/12/09 Javascript
jquery原理以及学习技巧介绍
2015/11/11 Javascript
jquery实现垂直和水平菜单导航栏
2020/08/27 Javascript
详解微信小程序开发之下拉刷新 上拉加载
2016/11/24 Javascript
简单理解js的prototype属性及使用
2016/12/07 Javascript
详解webpack 入门与解析
2018/04/09 Javascript
JavaScript中发出HTTP请求最常用的方法
2018/07/12 Javascript
详解Vue 动态组件与全局事件绑定总结
2018/11/11 Javascript
JQuery模拟实现网页中自定义鼠标右键菜单功能
2018/11/14 jQuery
bootstrap table插件动态加载表头
2019/07/19 Javascript
vue 获取视频时长的实例代码
2019/08/20 Javascript
js prototype和__proto__的关系是什么
2019/08/23 Javascript
Js参数RSA加密传输之jsencrypt.js的使用
2020/02/07 Javascript
vue 获取到数据但却渲染不到页面上的解决方法
2020/11/19 Vue.js
Python 返回汉字的汉语拼音
2009/02/27 Python
Python二叉树的定义及常用遍历算法分析
2017/11/24 Python
Python实现一个带权无回置随机抽选函数的方法
2019/07/24 Python
Selenium元素定位的30种方式(史上最全)
2020/05/11 Python
Python3创建Django项目的几种方法(3种)
2020/06/03 Python
pytorch VGG11识别cifar10数据集(训练+预测单张输入图片操作)
2020/06/24 Python
python -v 报错问题的解决方法
2020/09/15 Python
pycharm实现猜数游戏
2020/12/07 Python
线程同步的方法
2016/11/23 面试题
高中自我鉴定范文
2013/11/03 职场文书
淘宝活动策划方案
2014/02/06 职场文书
导游词之太湖
2019/10/08 职场文书
导游词之湖州-太湖
2019/10/11 职场文书
二手手机买卖合同范本(2019年版)
2019/10/28 职场文书
解决Nginx 配置 proxy_pass 后 返回404问题
2021/03/31 Servers
Python字符串对齐方法使用(ljust()、rjust()和center())
2021/04/26 Python
python 爬取哔哩哔哩up主信息和投稿视频
2021/06/07 Python