用javascript动态调整iframe高度的代码


Posted in Javascript onApril 10, 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" 
width=200 height=100></iframe>

Javascript 相关文章推荐
JScript 脚本实现文件下载 一般用于下载木马
Oct 29 Javascript
js 禁用只读文本框获得焦点时的退格键
Apr 25 Javascript
js 回车提交表单两种实现方法
Dec 31 Javascript
尝试在让script的type属性等于text/html
Jan 15 Javascript
JS实现图片横向滚动效果示例代码
Sep 04 Javascript
ie中js创建checkbox默认选中问题探讨
Oct 21 Javascript
jquery中$each()方法的使用指南
Apr 30 Javascript
深入理解ECMAScript的几个关键语句
Jun 01 Javascript
vue实现百度下拉列表交互操作示例
Mar 12 Javascript
微信公众平台 客服接口发消息的实现代码(Java接口开发)
Apr 17 Javascript
解决vue 表格table列求和的问题
Nov 06 Javascript
Javascript文本框脚本实现方法解析
Oct 30 Javascript
Javascript下的keyCode键码值表
Apr 10 #Javascript
用javascript控制iframe滚动的代码
Apr 10 #Javascript
经常用到的JavasScript事件的翻译
Apr 09 #Javascript
在JavaScript中通过URL传递汉字的方法
Apr 09 #Javascript
Javascript中eval函数的使用方法与示例
Apr 09 #Javascript
给网站上的广告“加速”显示的方法
Apr 08 #Javascript
超级简单的图片防盗(HTML),好用
Apr 08 #Javascript
You might like
如何开发一个虚拟域名系统
2006/10/09 PHP
thinkphp3.2.3 分页代码分享
2016/07/28 PHP
Javascript this指针
2009/07/30 Javascript
jquery 注意事项与常用语法小结
2010/06/07 Javascript
Jquery选中或取消radio示例
2013/09/29 Javascript
jQuery Ajax异步处理Json数据详解
2013/11/05 Javascript
Node.js和PHP根据ip获取地理位置的方法
2014/03/14 Javascript
基于jQuery实现复选框的全选 全不选 反选功能
2014/11/24 Javascript
JavaScript之RegExp_动力节点Java学院整理
2017/06/29 Javascript
ionic App问题总结系列之ionic点击系统返回键退出App
2017/08/19 Javascript
vue基于element的区间选择组件
2018/09/07 Javascript
element-ui树形控件后台返回的数据+生成组织树的工具类
2020/03/05 Javascript
js实现石头剪刀布游戏
2020/10/11 Javascript
Python 类与元类的深度挖掘 I【经验】
2016/05/06 Python
python自动12306抢票软件实现代码
2018/02/24 Python
Python实现的当前时间多加一天、一小时、一分钟操作示例
2018/05/21 Python
pycharm配置pyqt5-tools开发环境的方法步骤
2019/02/11 Python
Python使用selenium + headless chrome获取网页内容的方法示例
2019/10/16 Python
Django项目中使用JWT的实现代码
2019/11/04 Python
pycharm无法导入本地模块的解决方式
2020/02/12 Python
html5使用canvas画三角形
2014/12/15 HTML / CSS
Kipling凯浦林美国官网:世界著名时尚休闲包袋品牌
2016/08/24 全球购物
Bose美国官网:购买Bose耳机和音箱
2019/03/10 全球购物
耐克亚太地区:Nike APAC
2019/12/07 全球购物
C#如何允许一个类被继承但是避免这个类的方法被重载?
2015/02/24 面试题
介绍一下Python下range()函数的用法
2013/11/07 面试题
教学实习自我评价
2014/01/28 职场文书
中学生2014国庆节演讲稿:不屈的民族
2014/09/21 职场文书
广告设计专业毕业生自我鉴定
2014/09/27 职场文书
判缓刑人员个人思想汇报
2014/10/10 职场文书
小学生思想品德评语
2014/12/31 职场文书
植物园观后感
2015/06/11 职场文书
如何撰写促销方案?
2019/07/05 职场文书
关于感恩的作文
2019/08/26 职场文书
2019年教师节祝福语精选,给老师送上真诚的祝福
2019/09/09 职场文书
Angular CLI发布路径的配置项浅析
2021/03/29 Javascript