用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 相关文章推荐
脚本收藏iframe
Jul 21 Javascript
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(下:动画篇)
Mar 24 Javascript
JQuery 文本框使用小结
May 22 Javascript
JavaScript数据结构和算法之图和图算法
Feb 11 Javascript
JS+DIV+CSS实现仿表单下拉列表效果
Aug 18 Javascript
vue实现列表的添加点击
Dec 29 Javascript
JS Select下拉框(支持输入模糊查询)
Feb 04 Javascript
解决OneThink中无法异步提交kindeditor文本框中修改后的内容方法
May 05 Javascript
获取当前按钮或者html的ID名称实例(推荐)
Jun 23 Javascript
Vue用v-for给src属性赋值的方法
Mar 03 Javascript
webpack4.x CommonJS模块化浅析
Nov 09 Javascript
JS异步处理的进化史深入讲解
Aug 25 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
用PHP伪造referer突破网盘禁止外连的代码
2008/06/15 PHP
PHP base64+gzinflate压缩编码和解码代码
2008/10/03 PHP
php中mysql操作buffer用法详解
2015/03/19 PHP
[原创]php逐行读取txt文件写入数组的方法
2015/07/02 PHP
PHP比较运算符的详细介绍
2015/09/29 PHP
php计算年龄精准到年月日
2015/11/17 PHP
详谈phpAdmin修改密码后拒绝访问的问题
2017/04/03 PHP
利用phpexcel对数据库数据的导入excel(excel筛选)、导出excel
2017/04/27 PHP
php微信开发之谷歌测距
2018/06/14 PHP
PHP删除数组中指定值的元素常用方法实例分析【4种方法】
2018/08/21 PHP
使用JavaScript switch case 另类写法
2010/03/14 Javascript
Javascript的一种模块模式
2010/09/08 Javascript
js 与 php 通过json数据进行通讯示例
2014/03/26 Javascript
基于jQuery实现的向下滑动二级菜单效果代码
2015/08/31 Javascript
深入理解Java线程编程中的阻塞队列容器
2015/12/07 Javascript
JQuery动态添加Select的Option元素实现方法
2016/08/29 Javascript
javascript闭包的使用之按钮切换功能
2018/08/30 Javascript
解决vue2 在mounted函数无法获取prop中的变量问题
2018/11/15 Javascript
[00:43]拉比克至宝魔导师密钥展示
2018/12/20 DOTA
简单介绍Python中的RSS处理
2015/04/13 Python
python3音乐播放器简单实现代码
2020/04/20 Python
Python3 使用cookiejar管理cookie的方法
2018/12/28 Python
PyQt QListWidget修改列表项item的行高方法
2019/06/20 Python
python中的colorlog库使用详解
2019/07/05 Python
Django REST framework内置路由用法
2019/07/26 Python
用Pelican搭建一个极简静态博客系统过程解析
2019/08/22 Python
Python3爬虫mitmproxy的安装步骤
2020/07/29 Python
python collections模块的使用
2020/10/16 Python
Python通过yagmail实现发送邮件代码解析
2020/10/27 Python
北美大型运动类产品商城:Champs Sports
2017/01/12 全球购物
英国优质鞋类专家:Robinson’s Shoes
2017/12/08 全球购物
英国领先的瓷砖专家:Walls and Floors
2018/04/27 全球购物
微笑服务标语
2014/06/24 职场文书
运动会开幕式通讯稿
2015/07/18 职场文书
中学生国庆节演讲稿2015
2015/07/30 职场文书
Java 异步任务计算FutureTask
2022/04/28 Java/Android