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 相关文章推荐
asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博)
Mar 14 Javascript
Javascript数组的排序 sort()方法和reverse()方法
Jun 04 Javascript
jQuery获取Select选择的Text和Value(详细汇总)
Jan 25 Javascript
jquery实现简单的轮换出现效果实例
Jul 23 Javascript
jQuery滚动加载图片实现原理
Dec 14 Javascript
js智能获取浏览器版本UA信息的方法
Aug 08 Javascript
jQuery实现CheckBox全选、全不选功能
Jan 11 Javascript
Javascript的this用法
Jan 16 Javascript
vue集成百度UEditor富文本编辑器使用教程
Sep 21 Javascript
js仿360开机效果
Dec 26 Javascript
javascript 原型与原型链的理解及应用实例分析
Feb 10 Javascript
JavaScript的Set数据结构详解
Feb 18 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 页面跳转到另一个页面的多种方法方法总结
2009/07/07 PHP
定义php常量的详解
2013/06/09 PHP
php实现的递归提成方案实例
2015/11/14 PHP
PHP进行批量任务处理不超时的解决方法
2016/07/11 PHP
JS辨别访问浏览器判断是android还是ios系统
2014/08/19 Javascript
JavaScript实现动态创建CSS样式规则方案
2014/09/06 Javascript
mvvm双向绑定机制的原理和实现代码(推荐)
2016/06/07 Javascript
bootstrap中模态框、模态框的属性实例详解
2017/02/17 Javascript
使用AngularJS2中的指令实现按钮的切换效果
2017/03/27 Javascript
PostgreSQL Node.js实现函数计算方法示例
2019/02/12 Javascript
解决layui数据表格排序图标被超出的表头挤出去的问题
2019/09/19 Javascript
Vue2.0 实现页面缓存和不缓存的方式
2019/11/12 Javascript
vue实现标签云效果的示例
2020/11/09 Javascript
[01:00:12]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第一场
2018/04/09 DOTA
Python中map和列表推导效率比较实例分析
2015/06/17 Python
numpy判断数值类型、过滤出数值型数据的方法
2018/06/09 Python
详解Python安装tesserocr遇到的各种问题及解决办法
2019/03/07 Python
浅谈Python类中的self到底是干啥的
2019/11/11 Python
python实现拼接图片
2020/03/23 Python
python matplotlib:plt.scatter() 大小和颜色参数详解
2020/04/14 Python
Python通过kerberos安全认证操作kafka方式
2020/06/06 Python
Vs Code中8个好用的python 扩展插件
2020/10/12 Python
详解如何修改jupyter notebook的默认目录和默认浏览器
2021/01/24 Python
HTML5实现视频直播功能思路详解
2017/11/16 HTML / CSS
德国购买门票网站:ADticket.de
2019/10/31 全球购物
英国Radley包德国官网:Radley London德国
2019/11/18 全球购物
J2EE面试题
2016/03/14 面试题
高级电工工作职责
2013/11/21 职场文书
带病坚持工作事迹
2014/05/03 职场文书
最新优秀教师个人先进事迹材料
2014/05/06 职场文书
中学生清明节演讲稿
2015/03/18 职场文书
身份证丢失证明
2015/06/19 职场文书
运动会致辞稿
2015/07/29 职场文书
八年级数学教学反思
2016/02/17 职场文书
离婚协议书格式范本
2016/03/18 职场文书
django项目、vue项目部署云服务器的详细过程
2022/07/23 Servers