用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 相关文章推荐
jquery Mobile入门—外部链接切换示例代码
Jan 08 Javascript
jQuery入门之层次选择器实例简析
Dec 11 Javascript
jQuery进行组件开发完整实例
Dec 15 Javascript
jQuery实现div拖拽效果实例分析
Feb 20 Javascript
js获取页面及个元素高度、宽度的代码
Apr 26 Javascript
Javascript中引用类型传递的知识点小结
Mar 06 Javascript
JS获取鼠标坐标并且根据鼠标位置不同弹出不同内容
Jun 12 Javascript
聊聊Vue.js的template编译的问题
Oct 09 Javascript
AngularJS使用ui-route实现多层嵌套路由的示例
Jan 10 Javascript
vue做移动端适配最佳解决方案(亲测有效)
Sep 04 Javascript
Element输入框带历史查询记录的实现示例
Jan 15 Javascript
Element el-button 按钮组件的使用详解
Feb 01 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/07/19 PHP
CodeIgniter针对lighttpd服务器URL重写的方法
2015/06/10 PHP
PHP传值到不同页面的三种常见方式及php和html之间传值问题
2015/11/19 PHP
yii2实现Ueditor百度编辑器的示例代码
2018/11/02 PHP
js 三级关联菜单效果实例
2013/08/13 Javascript
Extjs表单常见验证小结
2014/03/07 Javascript
网页实时显示服务器时间和javscript自运行时钟
2014/06/09 Javascript
javascript使用数组的push方法完成快速排序
2014/09/15 Javascript
JS截取与分割字符串常用技巧总结
2015/11/10 Javascript
jquery对象和DOM对象的任意相互转换
2016/02/21 Javascript
Node.js的基本知识简单汇总
2016/09/19 Javascript
Vue表单验证插件Vue Validator使用方法详解
2017/04/07 Javascript
微信小程序开发图片拖拽实例详解
2017/05/05 Javascript
深究AngularJS中ng-drag、ng-drop的用法
2017/06/12 Javascript
bootstrap多层模态框滚动条消失的问题
2017/07/21 Javascript
vue 2.1.3 实时显示当前时间,每秒更新的方法
2018/09/16 Javascript
vue 子组件修改data或调用操作
2020/08/07 Javascript
用Python编写简单的微博爬虫
2016/03/04 Python
Pycharm 创建 Django admin 用户名和密码的实例
2018/05/30 Python
详解numpy的argmax的具体使用
2019/05/27 Python
python实现Dijkstra算法的最短路径问题
2019/06/21 Python
Python telnet登陆功能实现代码
2020/04/16 Python
Django之富文本(获取内容,设置内容方式)
2020/05/21 Python
python3.9和pycharm的安装教程并创建简单项目的步骤
2021/02/03 Python
财务管理职业生涯规划书
2014/02/26 职场文书
一年级班主任感言
2014/03/08 职场文书
电子工程专业毕业生求职信
2014/03/14 职场文书
合作协议书
2014/04/23 职场文书
村班子对照检查材料
2014/08/18 职场文书
建议书格式
2015/02/04 职场文书
2015年生活老师工作总结
2015/05/27 职场文书
团委副书记工作总结
2015/08/14 职场文书
《所见》教学反思
2016/02/23 职场文书
浅谈MySQL表空间回收的正确姿势
2021/10/05 MySQL
基于CSS制作创意端午节专属加载特效
2022/06/01 HTML / CSS
NoSQL优缺点与MongoDB数据库简介
2022/06/05 MongoDB