用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 相关文章推荐
原生js写的放大镜效果
Aug 22 Javascript
js创建子窗口并且回传值示例代码
Jul 02 Javascript
jquery自定义滚动条插件示例分享
Feb 21 Javascript
jquery 取子节点及当前节点属性值的方法
Aug 24 Javascript
JavaScript中字符串分割函数split用法实例
Apr 07 Javascript
jQuery移动web开发之页面跳转和加载外部页面的实现
Dec 04 Javascript
省市选择的简单实现(基于zepto.js)
Jun 21 Javascript
用Angular实时获取本地Localstorage数据,实现一个模拟后台数据登入的效果
Nov 09 Javascript
加载 vue 远程代码的组件实例详解
Nov 20 Javascript
微信小程序中使用ECharts 异步加载数据的方法
Jun 27 Javascript
微信小程序实现星级评分和展示
Jul 05 Javascript
微信小程序实现点击效果
Jun 21 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新浪微博登录接口用法实例
2014/12/23 PHP
PHP中substr函数字符串截取用法分析
2016/01/07 PHP
php版微信公众平台之微信网页登陆授权示例
2016/09/23 PHP
Thinkphp 在api开发中异常返回依然是html的解决方式
2019/10/16 PHP
js中几种去掉字串左右空格的方法
2006/12/25 Javascript
简单的JS多重继承示例
2008/03/13 Javascript
js 图片等比例缩放代码
2010/05/13 Javascript
Jquery截取中文字符串的实现代码
2010/12/22 Javascript
JSDoc 介绍使用规范JsDoc的使用介绍
2011/02/12 Javascript
javascript动画对象支持加速、减速、缓入、缓出的实现代码
2012/09/30 Javascript
jquery操作HTML5 的data-*的用法实例分享
2014/08/17 Javascript
浅谈JSON和JSONP区别及jQuery的ajax jsonp的使用
2014/11/23 Javascript
node.js连接mongoDB数据库 快速搭建自己的web服务
2016/04/17 Javascript
老生常谈原生JS执行环境与作用域
2016/11/22 Javascript
基于jquery二维码生成插件qrcode
2017/01/07 Javascript
JavaScript字符串对象(string)基本用法示例
2017/01/18 Javascript
如何快速上手Vuex
2017/02/14 Javascript
JSON与JS对象的区别与对比
2017/03/01 Javascript
Vue项目中引入外部文件的方法(css、js、less)
2017/07/24 Javascript
bootstrap Table的一些小操作
2017/11/01 Javascript
AngularJs 终极购物车(实例讲解)
2017/11/08 Javascript
基于node下的http小爬虫的示例代码
2018/01/11 Javascript
Vue.js 踩坑记之双向绑定
2018/05/03 Javascript
微信小程序分享功能之按钮button 边框隐藏和点击隐藏
2018/06/14 Javascript
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
2020/06/19 Javascript
vue项目中微信登录的实现操作
2020/09/08 Javascript
Python中利用sorted()函数排序的简单教程
2015/04/27 Python
python读取文本绘制动态速度曲线
2018/06/21 Python
Python获取当前脚本文件夹(Script)的绝对路径方法代码
2019/08/27 Python
Python浮点数四舍五入问题的分析与解决方法
2019/11/19 Python
a标签下载链接的简单实现
2016/09/13 HTML / CSS
HTML5新增form控件和表单属性实例代码详解
2019/05/15 HTML / CSS
J2EE面试题大全
2016/08/06 面试题
水污染治理专业毕业生推荐信
2013/11/14 职场文书
骨干教师培训方案
2014/05/06 职场文书
校园广播稿100字
2014/10/06 职场文书