用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 相关文章推荐
25个非常棒的jQuery滑块插件和教程小结
Sep 02 Javascript
js使下拉列表框可编辑不止是选择
Dec 12 Javascript
js设置文本框中焦点位置在最后的示例代码(简单实用)
Mar 04 Javascript
基于JS实现导航条之调用网页助手小精灵的方法
Jun 17 Javascript
HTML页面,测试JS对C函数的调用简单实例
Aug 09 Javascript
js正则表达式注册页面表单验证
Oct 11 Javascript
jquery实现一个全局计时器(商城可用)
Jun 30 jQuery
JS实现将对象转化为数组的方法分析
Jan 21 Javascript
javascript获取select值的方法完整实例
Jun 20 Javascript
微信小程序 scroll-view 水平滚动实现过程解析
Oct 12 Javascript
JS co 函数库的含义和用法实例总结
Apr 08 Javascript
vue-calendar-component 封装多日期选择组件的实例代码
Dec 04 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抽象类 介绍
2012/06/13 PHP
PHP使用MPDF类生成PDF的方法
2015/12/08 PHP
php 5.4 全新的代码复用Trait详解
2017/01/05 PHP
Yii2 队列 shmilyzxt/yii2-queue 简单概述
2017/08/02 PHP
PHP基于PDO调用sqlserver存储过程通用方法【基于Yii框架】
2017/10/07 PHP
PHP实现的猴王算法(猴子选大王)示例
2018/04/30 PHP
验证javascript中Object和Function的关系的三段简单代码
2010/06/27 Javascript
关于递归运算的顺序测试代码
2011/11/30 Javascript
在iframe里的页面编写js,实现在父窗口上创建动画效果展开和收缩的div(不变动iframe父窗口代码)
2011/12/20 Javascript
Webpack 实现 AngularJS 的延迟加载
2016/03/02 Javascript
JS 通过系统时间限定动态添加 select option的实例代码
2016/06/09 Javascript
js手机号批量滚动抽奖实现代码
2020/04/17 Javascript
使用vue框架 Ajax获取数据列表并用BootStrap显示出来
2017/04/24 Javascript
详解A标签中href=&quot;&quot;的几种用法
2017/08/20 Javascript
vue 监听屏幕高度的实例
2018/09/05 Javascript
vue兄弟组件传递数据的实例
2018/09/06 Javascript
js根据json数据中的某一个属性来给数据分组的方法
2018/10/08 Javascript
node.js域名解析实现方法详解
2019/11/05 Javascript
详解小程序如何动态绑定点击的执行方法
2019/11/26 Javascript
Python实现Const详解
2015/01/27 Python
python3实现短网址和数字相互转换的方法
2015/04/28 Python
黑科技 Python脚本帮你找出微信上删除你好友的人
2016/01/07 Python
详解pyenv下使用python matplotlib模块的问题解决
2018/11/29 Python
numpy和pandas中数组的合并、拉直和重塑实例
2019/06/28 Python
python 动态调用函数实例解析
2019/10/21 Python
Python -m参数原理及使用方法解析
2020/08/21 Python
ALDO美国官网:加拿大女鞋品牌
2018/12/28 全球购物
通信工程专业女生个人求职信
2013/09/21 职场文书
服装设计行业个人的自我评价
2013/12/20 职场文书
小学生考试获奖感言
2014/01/30 职场文书
《蚕姑娘》教学反思
2014/04/15 职场文书
政府绩效管理实施方案
2014/05/04 职场文书
民间个人借款协议书
2014/09/30 职场文书
学生会招新宣传语
2015/07/13 职场文书
2016年暑期见闻作文
2015/11/25 职场文书
话题作文之成长
2019/12/09 职场文书