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 相关文章推荐
XML+XSL 与 HTML 两种方案的结合
Apr 22 Javascript
基于jquery的让页面控件不可用的实现代码
Apr 27 Javascript
为jQuery增加join方法的实现代码
Nov 28 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件
Dec 21 Javascript
Javascript实现视频轮播在pc端与移动端均可
Sep 29 Javascript
JavaScript中Math对象方法使用概述
Jan 02 Javascript
JavaScript设计模式之适配器模式介绍
Dec 28 Javascript
BootStrap table表格插件自适应固定表头(超好用)
Aug 24 Javascript
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
Nov 22 Javascript
vue实现图片预览组件封装与使用
Jul 13 Javascript
JavaScript的查询机制LHS和RHS解析
Aug 16 Javascript
jQuery 实现扁平式小清新导航
Jul 07 jQuery
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 设计模式之 工厂模式
2008/12/19 PHP
PHP iconv 函数转gb2312的bug解决方法
2009/10/11 PHP
php ss7.5的数据调用 (笔记)
2010/03/08 PHP
PHP使用gmdate实现将一个UNIX 时间格式化成GMT文本的方法
2015/03/19 PHP
javascript globalStorage类代码
2009/06/04 Javascript
学习ExtJS Column布局
2009/10/08 Javascript
javascript学习笔记(十) js对象 继承
2012/06/19 Javascript
js禁止document element对象选中文本实现代码
2013/03/21 Javascript
JavaScript实现可拖拽的拖动层Div实例
2015/08/05 Javascript
详解AngularJS中的filter过滤器用法
2016/01/04 Javascript
Angular.js与Bootstrap相结合实现表格分页代码
2016/04/12 Javascript
js实现楼层效果的简单实例
2016/07/15 Javascript
js判断PC端与移动端跳转
2020/12/24 Javascript
vue学习笔记之vue1.0和vue2.0的区别介绍
2017/05/17 Javascript
React Native中Navigator的使用方法示例
2017/10/13 Javascript
js+html获取系统当前时间
2017/11/10 Javascript
vue+element创建动态的form表单及动态生成表格的行和列
2019/05/20 Javascript
17道题让你彻底理解JS中的类型转换
2019/08/08 Javascript
JS document form表单元素操作完整示例
2020/01/13 Javascript
js实现点击烟花特效
2020/10/14 Javascript
用webAPI实现图片放大镜效果
2020/11/23 Javascript
[01:11:48]Fnatic vs IG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
python 文件和路径操作函数小结
2009/11/23 Python
Python常用时间操作总结【取得当前时间、时间函数、应用等】
2017/05/11 Python
使用Python实现简单的服务器功能
2017/08/25 Python
python enumerate函数的使用方法总结
2017/11/15 Python
python 多线程将大文件分开下载后在合并的实例
2018/11/09 Python
Django Form and ModelForm的区别与使用
2019/12/06 Python
python编程进阶之异常处理用法实例分析
2020/02/21 Python
python中温度单位转换的实例方法
2020/12/27 Python
美国女士时尚珠宝及配饰购物网站:Icing
2018/07/02 全球购物
艺术专业大学生自我评价
2013/09/22 职场文书
电信专业应届生自荐信
2013/09/28 职场文书
千元咖啡店的创业计划书范文
2013/12/29 职场文书
公司总经理岗位职责
2014/03/15 职场文书
学习新党章心得体会2016
2016/01/15 职场文书