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 相关文章推荐
JavaScript中:表达式和语句的区别[译]
Sep 17 Javascript
Jquery选择器中使用变量实现动态选择例子
Jul 25 Javascript
JavaScript判断FileUpload控件上传文件类型
Sep 28 Javascript
JavaScript判断页面加载完之后再执行预定函数的技巧
May 17 Javascript
jQuery 遍历map()方法详解
Nov 04 Javascript
JSON与js对象序列化实例详解
Mar 16 Javascript
webpack学习教程之publicPath路径问题详解
Jun 17 Javascript
Vue 路由 过渡动效 数据获取方法
Jul 31 Javascript
Angular 实现输入框中显示文章标签的实例代码
Nov 07 Javascript
Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
May 28 Javascript
jquery 时间戳转日期过程详解
Oct 12 jQuery
Vue基于localStorage存储信息代码实例
Nov 16 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
全国FM电台频率大全 - 3 河北省
2020/03/11 无线电
php 清除网页病毒的方法
2008/12/05 PHP
php获取本地图片文件并生成xml文件输出具体思路
2013/04/27 PHP
让PHP显示Facebook的粉丝数量方法
2014/01/08 PHP
prototype class详解
2006/09/07 Javascript
javascript学习笔记(六) Date 日期类型
2012/06/19 Javascript
JS编程小常识很有用
2012/11/26 Javascript
JavaScript中匿名、命名函数的性能测试
2014/09/04 Javascript
JS数组(Array)处理函数整理
2014/12/07 Javascript
jQuery简单实现禁用右键菜单
2015/03/10 Javascript
jQuery插件Tooltipster实现漂亮的工具提示
2015/04/12 Javascript
jQuery中使用each处理json数据
2015/04/23 Javascript
javascript+ajax实现产品页面加载信息
2015/07/09 Javascript
jQuery中常用的遍历函数用法实例总结
2015/09/01 Javascript
实例解析jQuery中如何取消后续执行内容
2016/12/01 Javascript
jQuery实现鼠标悬停3d菜单展开动画效果
2017/01/19 Javascript
基于vue+ bootstrap实现图片上传图片展示功能
2017/05/17 Javascript
基于js 字符串indexof与search方法的区别(详解)
2017/12/04 Javascript
vue内置组件transition简单原理图文详解(小结)
2018/07/12 Javascript
Vue无限滑动周选择日期的组件的示例代码
2018/07/18 Javascript
JavaScript函数定义方法实例详解
2019/03/05 Javascript
vue实现抽屉弹窗效果
2020/11/15 Javascript
Python 2.7.x 和 3.x 版本的重要区别小结
2014/11/28 Python
Python Tkinter GUI编程入门介绍
2015/03/10 Python
快速解决PyCharm无法引用matplotlib的问题
2018/05/24 Python
Python3 翻转二叉树的实现
2019/09/30 Python
python列表生成器迭代器实例解析
2019/12/19 Python
Python原始套接字编程实例解析
2020/01/29 Python
细说CSS3中的选择符
2008/10/17 HTML / CSS
浅谈css3中的前缀
2016/07/20 HTML / CSS
纯CSS3实现的井字棋游戏
2020/11/25 HTML / CSS
DVF官方网站:美国时装界尊尚品牌
2017/08/29 全球购物
广州地球村科技数据库题目
2016/04/25 面试题
秋天的怀念教学反思
2014/04/28 职场文书
高中运动会广播稿
2015/08/19 职场文书
解决mysql的int型主键自增问题
2021/07/15 MySQL