JS实现iframe自适应高度的方法示例


Posted in Javascript onJanuary 07, 2017

本文实例讲述了JS实现iframe自适应高度的方法。分享给大家供大家参考,具体如下:

<iframe id="mainFrame" name="mainFrame" src="/zwgk/hsearchview" width="740" frameborder="0" scrolling="no" scrolling="no" frameborder="0" >
</iframe>
<script type="text/javascript" language="javascript">
function reinitIframe(){
 var iframe = document.getElementById("mainFrame");
 try{
 var bHeight = iframe.contentWindow.document.body.scrollHeight;
 var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
 var height = Math.max(bHeight, dHeight);
 iframe.height = height;
 }catch (ex){}
 }
 window.setInterval("reinitIframe()", 100);
</script>

PS:高度自适应应用广泛,本站的很多在线工具也使用了这一技巧,列举如下几个工具供大家参考:

JavaScript在线格式化工具(基于beautify.js插件):
http://tools.3water.com/code/js_beautify

在线颜色选择器工具/RGB颜色查询对照表:
http://tools.3water.com/color/colorpicker

在线个人所得税计算器:
http://tools.3water.com/jisuanqi/tax_calc

宋词在线查询:
http://tools.3water.com/bianmin/songci

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript中[]和{}对象使用介绍
Mar 20 Javascript
setTimeout()与setInterval()方法区别介绍
Dec 24 Javascript
jquery实现炫酷的叠加层自动切换特效
Feb 01 Javascript
jQuery+css实现的tab切换标签(兼容各浏览器)
Jan 28 Javascript
AngularJS基础 ng-focus 指令简单示例
Aug 01 Javascript
JS创建对象的写法示例
Nov 04 Javascript
JS仿Base.js实现的继承示例
Apr 07 Javascript
JavaScript实用代码小技巧
Aug 23 Javascript
在Vue中获取组件声明时的name属性方法
Sep 12 Javascript
vxe-table vue table 表格组件功能
May 26 Javascript
七行JSON代码把你的网站变成移动应用过程详解
Jul 09 Javascript
JavaScript的function函数详细介绍
Nov 20 Javascript
JS小数转换为整数的方法分析
Jan 07 #Javascript
jQuery日程管理插件fullcalendar使用详解
Jan 07 #Javascript
基于jquery二维码生成插件qrcode
Jan 07 #Javascript
jquery validation验证表单插件
Jan 07 #Javascript
JQuery ZTree使用方法详解
Jan 07 #Javascript
jquery实现转盘抽奖功能
Jan 06 #Javascript
BootStrap3中模态对话框的使用
Jan 06 #Javascript
You might like
php 无限级分类学习参考之对ecshop无限级分类的解析 带详细注释
2010/03/23 PHP
php socket实现的聊天室代码分享
2014/08/16 PHP
ECSHOP完美解决Deprecated: preg_replace()报错的问题
2016/05/17 PHP
php实现 master-worker 守护多进程模式的实例代码
2019/07/20 PHP
PHP 模拟登陆功能实例详解
2019/09/10 PHP
PHP使用redis位图bitMap 实现签到功能
2019/10/08 PHP
THINKPHP5分页数据对象处理过程解析
2020/10/28 PHP
asp批量修改记录的代码
2008/06/25 Javascript
JavaScript判断窗口是否最小化的代码(跨浏览器)
2010/08/01 Javascript
使用js检测浏览器的实现代码
2013/05/14 Javascript
json的定义、标准格式及json字符串检验
2014/05/11 Javascript
jQuery监控文本框事件并作相应处理的方法
2015/04/16 Javascript
轻松实现jquery选项卡切换效果
2016/10/10 Javascript
JS实现随机颜色的3种方法与颜色格式的转化
2017/01/05 Javascript
Vue自定义事件(详解)
2017/08/19 Javascript
Node之简单的前后端交互(实例讲解)
2017/11/14 Javascript
深入理解Vue Computed计算属性原理
2018/05/29 Javascript
python3实现单目标粒子群算法
2019/11/14 Python
Python中zip()函数的解释和可视化(实例详解)
2020/02/16 Python
Python中如何添加自定义模块
2020/06/09 Python
Python持续监听文件变化代码实例
2020/07/22 Python
python Matplotlib模块的使用
2020/09/16 Python
浅谈matplotlib默认字体设置探索
2021/02/03 Python
CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式
2013/11/05 HTML / CSS
关于css兼容性问题及一些常见问题汇总
2016/05/03 HTML / CSS
Brora官网:英国领先的羊绒服装品牌
2019/08/28 全球购物
印度电子产品购物网站:Vijay Sales
2021/02/16 全球购物
高三历史教学反思
2014/01/09 职场文书
培训楼经理岗位责任制
2014/02/10 职场文书
2014小学数学教研组工作总结
2014/12/06 职场文书
2014个人年度工作总结
2014/12/15 职场文书
社区文明倡议书
2015/04/28 职场文书
敬老院志愿者活动总结
2015/05/06 职场文书
MySQL 逻辑备份与恢复测试的相关总结
2021/05/14 MySQL
Python中Selenium对Cookie的操作方法
2021/07/09 Python
SQL注入详解及防范方法
2021/12/06 MySQL