用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 相关文章推荐
获取JavaScript用户自定义类的类名称的代码
Mar 08 Javascript
如何在JavaScript中实现私有属性的写类方式(一)
Dec 04 Javascript
使用jquery+CSS实现控制打印样式
Dec 31 Javascript
谈谈impress.js初步理解
Sep 09 Javascript
JS实现的页面自定义滚动条效果
Oct 26 Javascript
js确认框confirm()用法实例详解
Jan 07 Javascript
总结AngularJS开发者最常犯的十个错误
Aug 31 Javascript
ES2015 Symbol 一种绝不重复的值
Dec 25 Javascript
IntersectionObserver实现图片懒加载的示例
Sep 29 Javascript
vue组件(全局,局部,动态加载组件)
Sep 02 Javascript
微信小程序实现的picker多级联动功能示例
May 23 Javascript
package.json各个属性说明详解
Mar 11 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
咖啡与牛奶
2021/03/03 冲泡冲煮
PHP 强制性文件下载功能的函数代码(任意文件格式)
2010/05/26 PHP
php 面向对象的一个例子
2011/04/12 PHP
PHP 中使用explode()函数切割字符串为数组的示例
2017/05/06 PHP
PHP数据库编程之MySQL优化策略概述
2017/08/16 PHP
PHP实现生成数据字典功能示例
2018/05/24 PHP
js removeChild 障眼法 可能出现的错误
2009/10/06 Javascript
jQuery表单获取和失去焦点输入框提示效果的实例代码
2013/08/01 Javascript
jQuery中RadioButtonList的功能及用法实例介绍
2013/08/23 Javascript
js的.innerHTML = &quot;&quot;IE9下显示有错误的解决方法
2013/09/16 Javascript
javascript 用函数语句和表达式定义函数的区别详解
2014/01/06 Javascript
js从Cookies里面取值的简单实现
2014/06/30 Javascript
JS实现控制表格只显示行边框或者只显示列边框的方法
2015/03/31 Javascript
jQuery 常用代码集锦(必看篇)
2016/05/16 Javascript
总结JavaScript设计模式编程中的享元模式使用
2016/05/21 Javascript
JavaScript prototype属性详解
2016/10/25 Javascript
使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解
2017/07/24 Javascript
angular内置provider之$compileProvider详解
2017/09/27 Javascript
vue.js todolist实现代码
2017/10/29 Javascript
简化版的vue-router实现思路详解
2018/10/19 Javascript
JavaScript数组、json对象、eval()函数用法实例分析
2019/02/21 Javascript
JavaScript实现沿五角星形线摆动的小圆实例详解
2020/07/28 Javascript
[11:33]DAC2018 4.5SOLO赛决赛 MidOne vs Paparazi第二场
2018/04/06 DOTA
python脚本实现统计日志文件中的ip访问次数代码分享
2014/08/06 Python
python 链接和操作 memcache方法
2017/03/04 Python
Python实现调用另一个路径下py文件中的函数方法总结
2018/06/07 Python
对Python3 解析html的几种操作方式小结
2019/02/16 Python
Html5无刷新修改browser Url的方法
2014/01/15 HTML / CSS
英国美发和美容产品商城:HQhair
2019/02/08 全球购物
波兰运动鞋网上商店:Distance.pl
2020/07/30 全球购物
大学生就业推荐信范文
2013/11/29 职场文书
公司行政经理岗位职责
2013/12/24 职场文书
学生无故旷课检讨书
2014/09/20 职场文书
小学生节水倡议书
2015/04/29 职场文书
学风建设主题班会
2015/08/17 职场文书
使用pandas生成/读取csv文件的方法实例
2021/07/09 Python