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 相关文章推荐
Draggable Elements 元素拖拽功能实现代码
Mar 30 Javascript
javascript中判断一个值是否在数组中并没有直接使用
Dec 17 Javascript
三种取消选中单选框radio的方法
Sep 09 Javascript
js实现div弹出层的方法
Nov 20 Javascript
jQuery简单实现隐藏以及显示特效
Feb 26 Javascript
Jquery常用的方法汇总
Sep 01 Javascript
JS+CSS实现的经典圆角下拉菜单效果代码
Oct 21 Javascript
Javascript之String对象详解
Jun 08 Javascript
vue-router 前端路由之路由传值的方式详解
Apr 30 Javascript
vue.js使用v-model实现父子组件间的双向通信示例
Feb 05 Javascript
在Vuex中Mutations修改状态操作
Jul 24 Javascript
Vue 解决在element中使用$notify在提示信息中换行问题
Nov 11 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语法(3)
2006/10/09 PHP
PHP的类 功能齐全的发送邮件类
2006/10/09 PHP
PHP中使用localhost连接Mysql不成功的解决方法
2014/08/20 PHP
php检查函数必传参数是否存在的实例详解
2017/08/28 PHP
PHP守护进程化在C和PHP环境下的实现
2017/11/21 PHP
php 下 html5 XHR2 + FormData + File API 上传文件操作实例分析
2020/02/28 PHP
鼠标移动到一张图片时变为另一张图片
2006/12/05 Javascript
脚本之家贴图转换+转贴工具用到的js代码超级推荐
2007/04/05 Javascript
asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博)
2012/03/14 Javascript
PHPExcel中的一些常用方法汇总
2015/01/23 Javascript
javascript简单判断输入内容是否合法的方法
2016/05/11 Javascript
微信小程序 二维码canvas绘制实例详解
2017/01/06 Javascript
jquery ui sortable拖拽后保存位置
2017/04/27 jQuery
Vue.js 中的 $watch使用方法
2017/05/25 Javascript
微信小程序用户信息encryptedData详解
2018/08/24 Javascript
ES6基础之解构赋值(destructuring assignment)
2019/02/21 Javascript
JS隐藏号码中间4位代码实例
2019/04/09 Javascript
使用jQuery如何写一个含验证码的登录界面
2019/05/13 jQuery
JavaScript中0、空字符串、'0'是true还是false的知识点分享
2019/09/16 Javascript
layui 解决form表单点击无反应的问题
2019/10/25 Javascript
Vue学习之axios的使用方法实例分析
2020/01/06 Javascript
vue中keep-alive内置组件缓存的实例代码
2020/04/16 Javascript
python基础入门学习笔记(Python环境搭建)
2016/01/13 Python
python实现单向链表详解
2018/02/08 Python
树莓派实现移动拍照
2019/06/22 Python
Django中URL的参数传递的实现
2019/08/04 Python
在Pytorch中计算自己模型的FLOPs方式
2019/12/30 Python
使用Django清空数据库并重新生成
2020/04/03 Python
Python 处理日期时间的Arrow库使用
2020/08/18 Python
成立公司计划书
2014/05/07 职场文书
餐厅周年庆活动方案
2014/08/25 职场文书
2014年重阳节活动策划方案书
2014/09/16 职场文书
公司财务会计主管应聘求职信
2014/09/26 职场文书
庆祝儿童节标语
2014/10/09 职场文书
停发工资证明范本
2015/06/12 职场文书
Python基础之pandas数据合并
2021/04/27 Python