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 相关文章推荐
找到一点可怜的关于dojo资料,谢谢作者!
Dec 06 Javascript
jquery tools 系列 scrollable(2)
Sep 06 Javascript
JQuery的$命名冲突详细解析
Dec 28 Javascript
jquery修改网页背景颜色通过css方法实现
Jun 06 Javascript
用javascript关闭本窗口技巧小结
Sep 05 Javascript
JS实现仿QQ效果的三级竖向菜单
Sep 25 Javascript
Bootstrap学习笔记之环境配置(1)
Dec 07 Javascript
JS检测window.open打开的窗口是否关闭
Jun 25 Javascript
实例讲解javascript实现异步图片上传方法
Dec 05 Javascript
Angular动态绑定样式及改变UI框架样式的方法小结
Sep 03 Javascript
详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决
Apr 14 Javascript
vue项目中js-cookie的使用存储token操作
Nov 13 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 chr() ord()中文截取乱码问题解决方法
2008/09/08 PHP
PHP会话控制:Session与Cookie详解
2014/09/27 PHP
PHP简单实现HTTP和HTTPS跨域共享session解决办法
2015/05/27 PHP
PHP预定义超全局数组变量小结
2018/08/20 PHP
PHP addAttribute()函数讲解
2019/02/03 PHP
一个用js实现控制台控件的代码
2007/09/04 Javascript
JS控制显示隐藏兼容问题(IE6、IE7、IE8)
2010/04/01 Javascript
select标记美化--JS式插件、后期加载
2013/04/01 Javascript
js获取location.href的参数实例代码
2013/08/02 Javascript
js获取URL的参数的方法(getQueryString)示例
2013/09/29 Javascript
javascript数组操作总结和属性、方法介绍
2014/04/05 Javascript
jQuery获取动态生成的元素示例
2014/06/15 Javascript
new Date()问题在ie8下面的处理方法
2014/07/31 Javascript
Jquery ajax加载等待执行结束再继续执行下面代码操作
2015/11/24 Javascript
vuejs2.0运用原生js实现简单的拖拽元素功能示例
2017/02/24 Javascript
Javascript ES6中数据类型Symbol的使用详解
2017/05/02 Javascript
webpack css加载和图片加载的方法示例
2018/09/11 Javascript
JS实现点击发送验证码 xx秒后重新发送功能
2019/07/30 Javascript
TensorFlow.js 微信小程序插件开始支持模型缓存的方法
2020/02/21 Javascript
如何使用RoughViz可视化Vue.js中的草绘图表
2021/01/30 Vue.js
[42:24]完美世界DOTA2联赛循环赛 LBZS vs DM BO2第一场 11.01
2020/11/02 DOTA
Python2.x利用commands模块执行Linux shell命令
2016/03/11 Python
Python连接Mssql基础教程之Python库pymssql
2018/09/16 Python
Kears+Opencv实现简单人脸识别
2019/08/28 Python
tensorflow实现读取模型中保存的值 tf.train.NewCheckpointReader
2020/02/10 Python
Python实现AI自动抠图实例解析
2020/03/05 Python
基于python图书馆管理系统设计实例详解
2020/08/05 Python
Bally巴利中国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/10/09 全球购物
YOOX台湾:意大利奢侈品电商
2018/10/13 全球购物
JD Sports澳洲官网:英国领先的运动鞋和运动时尚零售商
2020/02/15 全球购物
巴西24小时在线药房:Droga Raia
2020/05/12 全球购物
高一政治教学反思
2014/01/28 职场文书
聊城大学毕业生自荐书
2014/02/01 职场文书
关于成绩下滑的自我检讨书
2014/09/20 职场文书
文言文辞职信
2015/02/28 职场文书
vue实现同时设置多个倒计时
2021/05/20 Vue.js