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 相关文章推荐
Display SQL Server Login Mode
Jun 21 Javascript
js文件中调用js的实现方法小结
Oct 23 Javascript
javascript中的delete使用详解
Apr 11 Javascript
jQuery的基本概念与高级编程
May 14 Javascript
jQuery中 delegate使用的问题
Jul 03 Javascript
Vue input控件通过value绑定动态属性及修饰符的方法
May 03 Javascript
JavaScript学习笔记之函数记忆
Sep 06 Javascript
详解在React里使用&quot;Vuex&quot;
Apr 02 Javascript
解决axios发送post请求返回400状态码的问题
Aug 11 Javascript
详解webpack之图片引入-增强的file-loader:url-loader
Oct 08 Javascript
JavaScript TAB栏切换效果的示例
Nov 05 Javascript
JavaScript实现网页动态生成表格
Nov 25 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的魔术常量__METHOD__简介
2014/07/08 PHP
php实现HTML实体编号与非ASCII字符串相互转换类实例
2016/11/02 PHP
PHP符合PSR编程规范的实例分享
2016/12/21 PHP
使用Zookeeper分布式部署PHP应用程序
2019/03/15 PHP
PHP实现笛卡尔积算法的实例讲解
2019/12/22 PHP
JavaScript将相对地址转换为绝对地址示例代码
2013/07/19 Javascript
基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化
2016/05/12 Javascript
使用AngularJS 跨站请求如何解决jsonp请求问题
2017/01/16 Javascript
js图片放大镜效果实现方法详解
2020/10/28 Javascript
使用vue-aplayer插件时出现的问题的解决
2018/03/02 Javascript
使用vue-infinite-scroll实现无限滚动效果
2018/06/22 Javascript
vue实现父子组件之间的通信以及兄弟组件的通信功能示例
2019/01/29 Javascript
[45:52]完美世界DOTA2联赛PWL S3 Forest vs INK ICE 第二场 12.09
2020/12/12 DOTA
python求crc32值的方法
2014/10/05 Python
用Python制作简单的钢琴程序的教程
2015/04/01 Python
使用django-guardian实现django-admin的行级权限控制的方法
2018/10/30 Python
Python实现随机创建电话号码的方法示例
2018/12/07 Python
python 实现提取某个索引中某个时间段的数据方法
2019/02/01 Python
浅谈python常用程序算法
2019/03/22 Python
分享8点超级有用的Python编程建议(推荐)
2019/10/13 Python
django迁移文件migrations的实现
2020/03/31 Python
Python脚本实现Zabbix多行日志监控过程解析
2020/08/26 Python
有趣、实用和鼓舞人心的产品:Inspire Uplift
2019/11/05 全球购物
网络工程与软件技术毕业生自荐信
2013/09/24 职场文书
库房主管岗位职责
2013/12/31 职场文书
优秀毕业生自我鉴定
2014/02/11 职场文书
个人借款担保书
2014/04/02 职场文书
学习方法演讲稿
2014/05/10 职场文书
社区巾帼文明岗事迹材料
2014/06/03 职场文书
离婚财产处理协议书
2014/09/30 职场文书
2014年护士长工作总结
2014/11/11 职场文书
写给医生的感谢信
2015/01/22 职场文书
开学第一天的感想
2015/08/10 职场文书
2016年第二十五次全国助残日活动总结
2016/04/01 职场文书
Python数据可视化之绘制柱状图和条形图
2021/05/25 Python
Python初学者必备的文件读写指南
2021/06/23 Python