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实现统计文本框Textarea字数增强用户体验
Dec 21 Javascript
js弹出层永远居中实现思路及代码
Nov 29 Javascript
JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)
Aug 11 Javascript
微信js-sdk分享功能接口常用逻辑封装示例
Oct 13 Javascript
使用jsonp实现跨域获取数据实例讲解
Dec 25 Javascript
jQuery实现动态添加tr到table的方法
Dec 26 Javascript
js canvas实现简单的图像扩散效果
Jun 28 Javascript
基于匀速运动的实例讲解(侧边栏,淡入淡出)
Oct 17 Javascript
JavaScript实现淘宝京东6位数字支付密码效果
Aug 18 Javascript
js实现按钮开关单机下拉菜单效果
Nov 22 Javascript
Express结合Webpack的全栈自动刷新
May 23 Javascript
详解关于Vue单元测试的几个坑
Apr 26 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中常用编辑器推荐
2007/01/02 PHP
php四种基础算法代码实例
2013/10/29 PHP
Windows中使用计划任务自动执行PHP程序实例
2014/05/09 PHP
PHP中is_dir()函数使用指南
2015/05/08 PHP
php mysqli查询语句返回值类型实例分析
2016/06/29 PHP
通过Unicode转义序列来加密,按你说的可以算是混淆吧
2007/05/06 Javascript
javascript firefox不显示本地预览图片问题的解决方法
2008/11/12 Javascript
jQuery.buildFragment使用方法及思路分析
2013/01/07 Javascript
JavaScript 中的日期和时间及表示标准介绍
2013/08/21 Javascript
轻松创建nodejs服务器(10):处理上传图片
2014/12/18 NodeJs
jQuery()方法的第二个参数详解
2015/04/29 Javascript
JavaScript 2048 游戏实例代码(简单易懂)
2016/03/25 Javascript
JavaScript  event对象整理及详细介绍
2016/10/10 Javascript
Bootstrap文件上传组件之bootstrap fileinput
2016/11/25 Javascript
JavaScript运动框架 解决速度正负取整问题(一)
2017/05/17 Javascript
详解基于Angular4+ server render(服务端渲染)开发教程
2017/08/28 Javascript
jQuery擦除插件eraser使用方法详解
2020/01/11 jQuery
利用 JavaScript 实现并发控制的示例代码
2020/12/31 Javascript
python实现搜索本地文件信息写入文件的方法
2016/02/22 Python
python3 unicode列表转换为中文的实例
2018/10/26 Python
Python中logging.NullHandler 的使用教程
2018/11/29 Python
Python基础之循环语句用法示例【for、while循环】
2019/03/23 Python
Django框架使用内置方法实现登录功能详解
2019/06/12 Python
python根据时间获取周数代码实例
2019/09/30 Python
pytorch中的自定义反向传播,求导实例
2020/01/06 Python
Pytorch释放显存占用方式
2020/01/13 Python
关于win10在tensorflow的安装及在pycharm中运行步骤详解
2020/03/16 Python
python tqdm实现进度条的示例代码
2020/11/10 Python
linux下进程间通信的方式
2014/12/23 面试题
调解员先进事迹材料
2014/02/07 职场文书
公司优秀员工获奖感言
2014/08/14 职场文书
代办社保委托书范文
2014/10/06 职场文书
放弃继承权公证书
2015/01/23 职场文书
2015年学校党建工作总结
2015/05/19 职场文书
CSS中妙用 drop-shadow 实现线条光影效果
2021/11/11 HTML / CSS
Android Flutter实现图片滑动切换效果
2022/04/07 Java/Android