js实现iframe自动自适应高度的方法


Posted in Javascript onFebruary 17, 2015

本文实例讲述了js实现iframe自动自适应高度的方法。分享给大家供大家参考。具体如下:

在编写网页的时候,很多时候要用到自动伸缩iframe高度 ,假如ifram中嵌入的是一个列表,那么增加数据后,刷新列表,iframe高度会自动伸长。删除数据后,iframe高度要自动缩短。

将下一段代码拷贝到iframe所在那个html或者jsp页面。在</html>标签后,调用此函数即可。

<script type="text/javascript">
  autoAdjustWindow();
</script>
<script type="text/javascript">
//自动调整iframe的高度,自适应树的展开和收缩
function autoAdjustWindow(){ 
  try{ 
    window.frameElement.height=document.body.scrollHeight;
    window.frameElement.parentElement.height=document.body.scrollHeight;
    window.frameElement.width=document.body.scrollWidth;
   window.frameElement.parentElement.width=document.body.scrollWidth; 
  }catch(e){
 
  }
}
</script>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
根据json字符串生成Html的一种方式
Jan 09 Javascript
使用JavaScript获取电池状态的方法
May 03 Javascript
js实现的Easy Tabs选项卡用法实例
Sep 06 Javascript
JS实现iframe自适应高度的方法(兼容IE与FireFox)
Jun 24 Javascript
js阻止冒泡和默认事件(默认行为)详解
Oct 20 Javascript
AngularJS定时器的使用与移除操作方法【interval与timeout】
Dec 14 Javascript
ionic实现下拉刷新载入数据功能
May 11 Javascript
ZeroClipboard.js使用一个flash复制多个文本框
Jun 19 Javascript
详解vue2.0 不同屏幕适配及px与rem转换问题
Feb 23 Javascript
JavaScript变量提升和严格模式实例分析
Jan 27 Javascript
基于layui轮播图满屏是高度自适应的解决方法
Sep 16 Javascript
vue 获取到数据但却渲染不到页面上的解决方法
Nov 19 Vue.js
js全选实现和判断是否有复选框选中的方法
Feb 17 #Javascript
Jquery树插件zTree用法入门教程
Feb 17 #Javascript
js实现九宫格图片半透明渐显特效的方法
Feb 16 #Javascript
JS+CSS实现Li列表隔行换色效果的方法
Feb 16 #Javascript
JavaScript实现文字与图片拖拽效果的方法
Feb 16 #Javascript
jQuery实现点击图片翻页展示效果的方法
Feb 16 #Javascript
JS+CSS实现可拖动的弹出提示框
Feb 16 #Javascript
You might like
Function eregi is deprecated (解决方法)
2013/06/21 PHP
解决CodeIgniter伪静态失效
2014/06/09 PHP
微信公众号支付之坑:调用支付jsapi缺少参数 timeStamp等错误解决方法
2016/01/12 PHP
Laravel 关联模型-关联新增和关联更新的方法
2019/10/10 PHP
jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法
2011/01/19 Javascript
jquery获取下拉列表的值为null的解决方法
2011/03/18 Javascript
JQuery插件Style定制化方法的分析与比较
2012/05/03 Javascript
纯js简单日历实现代码
2013/10/05 Javascript
php常见的页面跳转方法汇总
2015/04/15 Javascript
JScript中的条件注释详解
2015/04/24 Javascript
jquery如何获取元素的滚动条高度等实现代码
2015/10/19 Javascript
Bootstrap每天必学之媒体对象
2015/11/30 Javascript
AngularJs ng-route路由详解及实例代码
2016/09/14 Javascript
微信小程序(应用号)简单实例应用及实例详解
2016/09/26 Javascript
js实现日历的简单算法
2017/01/24 Javascript
canvas红包照片实例分享
2017/02/28 Javascript
jQuery Validate 相关参数及常用的自定义验证规则
2017/03/06 Javascript
angular实现IM聊天图片发送实例
2017/05/08 Javascript
微信小程序 rich-text的使用方法
2017/08/04 Javascript
javascript 缓冲运动框架的实现
2017/09/29 Javascript
iview同时验证多个表单问题总结
2018/09/29 Javascript
layui问题之模拟table表格中的选中按钮选中事件的方法
2019/09/20 Javascript
[01:38:19]夜魇凡尔赛茶话会 第五期
2021/03/11 DOTA
python3.5 email实现发送邮件功能
2018/05/22 Python
浅谈tensorflow中几个随机函数的用法
2018/07/27 Python
mvc框架打造笔记之wsgi协议的优缺点以及接口实现
2018/08/01 Python
HTML5本地存储之Database Storage应用介绍
2013/01/06 HTML / CSS
short s1 = 1; s1 = s1 + 1;有什么错? short s1 = 1; s1 += 1;有什么错?
2014/09/26 面试题
学习决心书
2014/03/11 职场文书
参观接待方案
2014/03/17 职场文书
外联部演讲稿
2014/05/24 职场文书
求职信范文大全
2014/05/26 职场文书
农业生产宣传标语
2014/10/08 职场文书
实习单位鉴定意见
2015/06/04 职场文书
比较几种Redis集群方案
2021/06/21 Redis
Win11跳过联网界面创建本地管理账户的3种方法
2022/04/20 数码科技