用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 选择文件夹对话框(web)
Jul 07 Javascript
JavaScript arguments 多参传值函数
Oct 24 Javascript
jQuery编辑器KindEditor4.1.4代码高亮显示设置教程
Mar 01 Javascript
js字符串转换成数字与数字转换成字符串的实现方法
Jan 08 Javascript
jQuery响应enter键的实现思路
Apr 18 Javascript
MVC Ajax Helper或Jquery异步加载部分视图
Nov 29 Javascript
轻松实现javascript图片轮播特效
Jan 13 Javascript
微信小程序之选项卡的实现方法
Sep 29 Javascript
Angular使用操作事件指令ng-click传多个参数示例
Mar 27 Javascript
vue 表单验证按钮事件交由父组件触发的方法
Dec 17 Javascript
微信小程序 拍照或从相册选取图片上传代码实例
Aug 28 Javascript
js实现图片粘贴到网页
Dec 06 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闭包函数详解
2016/02/13 PHP
Jquery多选下拉列表插件jquery multiselect功能介绍及使用
2013/05/24 Javascript
Eclipse引入jquery报错如何解决
2015/12/01 Javascript
AngularJS向后端ASP.NET API控制器上传文件
2016/02/03 Javascript
jquery插件uploadify多图上传功能实现代码
2016/08/12 Javascript
基于jQuery和Bootstrap框架实现仿知乎前端动态列表效果
2016/11/09 Javascript
浅谈angular4.0中路由传递参数、获取参数最nice的写法
2018/03/12 Javascript
element-ui中select组件绑定值改变,触发change事件方法
2018/08/24 Javascript
vue使用Font Awesome的方法步骤
2019/02/26 Javascript
一个Java程序猿眼中的前后端分离以及Vue.js入门(推荐)
2019/04/19 Javascript
javascript+HTML5 canvas绘制时钟功能示例
2019/05/15 Javascript
JavaScript 扩展运算符用法实例小结【基于ES6】
2019/06/17 Javascript
微信小程序个人中心的列表控件实现代码
2020/04/26 Javascript
详解Python中的循环语句的用法
2015/04/09 Python
python实现在sqlite动态创建表的方法
2015/05/08 Python
python3获取当前文件的上一级目录实例
2018/04/26 Python
完美解决Python 2.7不能正常使用pip install的问题
2018/06/12 Python
Django网络框架之创建虚拟开发环境操作示例
2019/06/06 Python
python函数的作用域及关键字详解
2019/08/20 Python
打印tensorflow恢复模型中所有变量与操作节点方式
2020/05/26 Python
灵活运用CSS3特性绘制简易版围棋效果
2016/09/28 HTML / CSS
Bailey帽子官方商店:Bailey Hats
2018/09/25 全球购物
开放系统互连参考模型
2016/06/29 面试题
师范教师大学生职业生涯规划范文
2014/01/05 职场文书
领导检查欢迎词
2014/01/14 职场文书
2014年寒假社会实践活动心得体会
2014/04/07 职场文书
铁路安全事故反思
2014/04/26 职场文书
化妆品活动策划方案
2014/05/23 职场文书
学校教研活动总结
2014/07/02 职场文书
幼儿园家长安全责任书
2014/07/22 职场文书
党性分析自查总结
2014/10/14 职场文书
2014年社区妇联工作总结
2014/12/02 职场文书
canvas绘制折线路径动画实现
2021/05/12 Javascript
my.ini优化mysql数据库性能的十个参数(推荐)
2021/05/26 MySQL
撤回我也能看到!教你用Python制作微信防撤回脚本
2021/06/11 Python
TaiShan 200服务器安装Ubuntu 18.04的图文教程
2022/06/28 Servers