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插入样式实现代码
Feb 22 Javascript
JS 获取浏览器和屏幕宽高等信息的实现思路及代码
Jul 31 Javascript
jquery操作checked属性以及disabled属性的多种方法
Jun 20 Javascript
jquery datatable后台封装数据示例代码
Aug 07 Javascript
网站基于flash实现的Banner图切换效果代码
Oct 14 Javascript
javascript基于DOM实现权限选择实例分析
May 14 Javascript
jquery 遍历数组 each 方法详解
May 25 Javascript
vue-cli+webpack在生成的项目中使用bootstrap实例代码
May 26 Javascript
微信小程序实现运动步数排行功能(可删除)
Jul 05 Javascript
vue使用Font Awesome的方法步骤
Feb 26 Javascript
Vue项目中使用WebUploader实现文件上传的方法
Jul 21 Javascript
微信小程序实现点赞业务
Feb 10 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版(4)
2006/10/09 PHP
PHP 应用程序的安全 -- 不能违反的四条安全规则
2006/11/26 PHP
Zend Studio去除编辑器的语法警告设置方法
2012/10/24 PHP
基于xcache的配置与使用详解
2013/06/18 PHP
Php连接及读取和写入mysql数据库的常用代码
2014/08/11 PHP
php一维二维数组键排序方法实例总结
2014/11/13 PHP
php运行提示:Fatal error Allowed memory size内存不足的解决方法
2014/12/17 PHP
php使用include 和require引入文件的区别
2017/02/16 PHP
JavaScript 闭包在封装函数时的简单分析
2009/11/28 Javascript
js比较和逻辑运算符的介绍
2013/03/10 Javascript
JavaScript调用客户端的可执行文件(示例代码)
2013/11/28 Javascript
js对象转json数组的简单实现案例
2014/02/28 Javascript
JS日期格式化之javascript Date format
2015/10/01 Javascript
Bootstrap显示与隐藏简单实现代码
2017/03/06 Javascript
JavaScript中in和hasOwnProperty区别详解
2017/08/04 Javascript
JS使用canvas中的measureText方法测量字体宽度示例
2019/02/02 Javascript
Vue在 Nuxt.js 中重定向 404 页面的方法
2019/04/23 Javascript
vue实现图片预览组件封装与使用
2019/07/13 Javascript
使用easyui从servlet传递json数据到前端页面的两种方法
2019/09/05 Javascript
vue quill editor 使用富文本添加上传音频功能
2020/01/14 Javascript
详解如何在vue+element-ui的项目中封装dialog组件
2020/12/11 Vue.js
Python 随机生成中文验证码的实例代码
2013/03/20 Python
Python 列表(List)操作方法详解
2014/03/11 Python
在Python中使用全局日志时需要注意的问题
2015/05/06 Python
Python中列表和元组的相关语句和方法讲解
2015/08/20 Python
Python编程入门之Hello World的三种实现方式
2015/11/13 Python
Python max内置函数详细介绍
2016/11/17 Python
pandas object格式转float64格式的方法
2018/04/10 Python
selenium+python自动化测试之多窗口切换
2019/01/23 Python
Pytorch 实现计算分类器准确率(总分类及子分类)
2020/01/18 Python
五分钟学会怎么用Pygame做一个简单的贪吃蛇
2021/01/06 Python
CSS3实现复选框动画特效示例代码
2016/09/27 HTML / CSS
html5在移动端的屏幕适应问题示例探讨
2014/06/15 HTML / CSS
Html5大文件断点续传实现方法
2015/12/05 HTML / CSS
计算机应用毕业生自荐信
2013/10/23 职场文书
2014年纪检监察工作总结
2014/11/11 职场文书