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 相关文章推荐
Zero Clipboard js+swf实现的复制功能使用方法
Mar 07 Javascript
jQuery获取地址栏参数插件(模仿C#)
Oct 26 Javascript
JQuery扩展插件Validate 2通过参数设置验证规则
Sep 05 Javascript
js或者jquery判断图片是否加载完成实现代码
Mar 20 Javascript
JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
Dec 14 Javascript
jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)
Jan 29 Javascript
js中window.open的参数及注意注意事项
Jul 06 Javascript
微信小程序 radio单选框组件详解及实例代码
Jan 10 Javascript
vue使用技巧及vue项目中遇到的问题
Jun 04 Javascript
JavaScript实现简单的隐藏式侧边栏功能示例
Aug 31 Javascript
判断js数据类型的函数实例详解
May 23 Javascript
微信小程序图片左右摆动效果详解
Jul 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脚本使WordPress拦截垃圾评论的方法示例
2015/12/10 PHP
硬盘浏览程序,保存成网页格式便可使用
2006/12/03 Javascript
JavaScript 函数式编程的原理
2009/10/16 Javascript
javascript正则表达式中参数g(全局)的作用
2010/11/11 Javascript
这段js代码得节约你多少时间
2011/12/20 Javascript
推荐40款强大的 jQuery 导航插件和教程(上篇)
2012/09/14 Javascript
javascript中普通函数的使用介绍
2013/12/19 Javascript
JS,Jquery获取select,dropdownlist,checkbox下拉列表框的值(示例代码)
2014/01/11 Javascript
使用jquery实现放大镜效果
2014/09/02 Javascript
使用JQuery库提供的扩展功能实现自定义方法
2014/09/09 Javascript
解决bootstrap中modal遇到Esc键无法关闭页面
2015/03/09 Javascript
jQuery制作可自定义大小的拼图游戏
2015/03/30 Javascript
javascript编程异常处理实例小结
2015/11/30 Javascript
JavaScript通过代码调用Flash显示的方法
2016/02/02 Javascript
JS功能代码集锦
2016/05/04 Javascript
javascript设计模式之Adapter模式【适配器模式】实现方法示例
2017/01/13 Javascript
简单实现bootstrap导航效果
2017/02/07 Javascript
详解react-redux插件入门
2018/04/19 Javascript
Vue波纹按钮组件制作
2018/04/30 Javascript
webpack打包react项目的实现方法
2018/06/21 Javascript
Vue基础学习之项目整合及优化
2019/06/02 Javascript
Python语法快速入门指南
2015/10/12 Python
Python-ElasticSearch搜索查询的讲解
2019/02/25 Python
K最近邻算法(KNN)---sklearn+python实现方式
2020/02/24 Python
python 穷举指定长度的密码例子
2020/04/02 Python
TensorFlow中如何确定张量的形状实例
2020/06/23 Python
python实现企业微信定时发送文本消息的示例代码
2020/11/24 Python
CSS3教程(8):CSS3透明度指南
2009/04/02 HTML / CSS
C#笔试题和英文面试题
2013/02/07 面试题
什么是会话Bean
2015/05/14 面试题
幼儿园课题方案
2014/06/09 职场文书
经营理念口号
2014/06/21 职场文书
2015年毕业实习工作总结
2015/05/29 职场文书
居住证明范文
2015/06/17 职场文书
决心书格式范文
2015/09/23 职场文书
如何利用React实现图片识别App
2022/02/18 Javascript