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 相关文章推荐
IE6与IE7中,innerHTML获取param的区别
Mar 15 Javascript
JavaScript 精粹读书笔记(1,2)
Feb 07 Javascript
javascript制作2048游戏
Mar 30 Javascript
详解js跨域原理以及2种解决方案
Dec 09 Javascript
微信小程序 简单DEMO布局,逻辑,样式的练习
Nov 30 Javascript
微信小程序 传值取值的几种方法总结
Jan 16 Javascript
JavaScript自定义分页样式
Jan 17 Javascript
webpack中CommonsChunkPlugin详细教程(小结)
Nov 09 Javascript
JS中Promise函数then的奥秘探究
Jul 30 Javascript
基于jquery实现的tab选项卡功能示例【附源码下载】
Jun 10 jQuery
JS实现的排列组合算法示例
Jul 16 Javascript
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 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动态生成JavaScript代码
2009/03/09 PHP
php 文件上传代码(限制jpg文件)
2010/01/05 PHP
php实现查询百度google收录情况(示例代码)
2013/08/02 PHP
thinkPHP5.0框架URL访问方法详解
2017/03/18 PHP
jQuery之按钮组件的深入解析
2013/06/19 Javascript
js识别不同浏览器基于userAgent做判断
2014/07/29 Javascript
使用纯javascript实现经典扫雷游戏
2015/04/23 Javascript
json格式数据的添加,删除及排序方法
2016/01/21 Javascript
BootStrap智能表单实战系列(六)表单编辑页面的数据绑定
2016/06/13 Javascript
jquery插件格式实例分析
2016/06/16 Javascript
jQuery轮播图效果精简版完整示例
2016/09/04 Javascript
jQuery用FormData实现文件上传的方法
2016/11/21 Javascript
JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)
2016/12/14 Javascript
使用Bootstrap Tabs选项卡Ajax加载数据实现
2016/12/23 Javascript
js点击任意区域弹出层消失实现代码
2016/12/27 Javascript
node.js与C语言 实现遍历文件夹下最大的文件,并输出路径,大小
2017/01/20 Javascript
AngularJS 限定$scope的范围实例详解
2017/06/23 Javascript
JS实现的JSON序列化操作简单示例
2018/07/02 Javascript
通过原生vue添加滚动加载更多功能
2019/11/21 Javascript
element 中 el-menu 组件的无限极循环思路代码详解
2020/04/26 Javascript
Python使用MYSQLDB实现从数据库中导出XML文件的方法
2015/05/11 Python
深入解读Python解析XML的几种方式
2016/02/16 Python
python实现的正则表达式功能入门教程【经典】
2017/06/05 Python
python 巧用正则寻找字符串中的特定字符的位置方法
2018/05/02 Python
Python参数解析模块sys、getopt、argparse使用与对比分析
2019/04/02 Python
python matplotlib库绘制散点图例题解析
2019/08/10 Python
Python中 CSV格式清洗与转换的实例代码
2019/08/29 Python
Python实现手绘图效果实例分享
2020/07/22 Python
Python自动创建Excel并获取内容
2020/09/16 Python
工作疏忽检讨书
2014/01/25 职场文书
2014公司党员自我评价范文
2014/09/11 职场文书
2015年感恩节活动总结
2015/03/24 职场文书
法定代表人身份证明书
2015/06/18 职场文书
个人合作协议范本
2015/08/06 职场文书
基于go interface{}==nil 的几种坑及原理分析
2021/04/24 Golang
解决Vmware虚拟机安装centos8报错“Section %Packages Does Not End With %End. Pane Is Dead”
2022/06/01 Servers