使用javascript实现Iframe自适应高度


Posted in Javascript onDecember 24, 2014

方法一:

$(window.parent.document).find("#ContentIframe").load(function() {

                    var main = $(window.parent.document).find("#ContentIframe");

                    var thisheight = $(document).height();

                    if (thisheight < 800)

                        thisheight = 800;

                    main.height(thisheight);

                });

这种写法,只能对于加载的时候对固有元素的自适应高度,当元素变化的时候(如添加了很多元素,高度变化后)不能及时改变父窗体的iframe高度。

方法二:

function setMainHeight() {
    var main = $(window.parent.document).find("#ContentIframe");

    var thisheight = $("body").height();

    if (thisheight < 800) { thisheight = 800; }

    main.height(thisheight+50);

    

    setTimeout(setMainHeight, 2000);

}

添加一个计时器,轮询判断子页面的高度变化。

以上2种都可以是iframe实现高度自适应,小伙伴们根据自己的项目需求,自由选择吧

Javascript 相关文章推荐
JavaScript 联动的无限级封装类,数据采用非Ajax方式,随意添加联动
Jun 29 Javascript
jquery如何获取复选框的值
Dec 12 Javascript
使用ajax+jqtransform实现动态加载select
Dec 01 Javascript
jQuery实现选项联动轮播效果【附实例】
Apr 19 Javascript
老生常谈JavaScript 函数表达式
Sep 01 Javascript
利用bootstrapValidator验证UEditor
Sep 14 Javascript
JavaScript中String对象的方法介绍
Jan 04 Javascript
JS组件系列之Gojs组件 前端图形化插件之利器
Nov 29 Javascript
深入浅析vue组件间事件传递
Dec 29 Javascript
Layui数据表格之获取表格中所有的数据方法
Aug 20 Javascript
详解js 创建对象的几种方法
Mar 08 Javascript
JavaScript实现公告栏上下滚动效果
Mar 13 Javascript
常用的jQuery前端技巧收集
Dec 24 #Javascript
jQuery中hide()方法用法实例
Dec 24 #Javascript
创建、调用JavaScript对象的方法集锦
Dec 24 #Javascript
jQuery的css()方法用法实例
Dec 24 #Javascript
使用javascript获取页面名称
Dec 23 #Javascript
jQuery类选择器用法实例
Dec 23 #Javascript
基于JQuery制作可编辑的表格特效
Dec 23 #Javascript
You might like
在VS2008中编译MYSQL5.1.48的方法
2010/07/03 PHP
linux下删除7天前日志的代码(php+shell)
2011/01/02 PHP
php 截取字符串并以零补齐str_pad() 函数
2011/05/07 PHP
PHP If Else(elsefi) 语句
2013/04/07 PHP
php去除HTML标签实例
2013/11/06 PHP
PHP实现微信红包金额拆分试玩的算法示例
2018/04/07 PHP
在laravel中实现ORM模型使用第二个数据库设置
2019/10/24 PHP
使用jquery实现简单的ajax
2013/07/08 Javascript
js左侧三级菜单导航实例代码
2013/09/13 Javascript
JS取文本框中最小值的简单实例
2013/11/29 Javascript
php析构函数的具体用法小结
2014/03/11 Javascript
JQuery 动态生成Table表格实例代码
2016/12/02 Javascript
深入探究angular2 UI组件之primeNG用法
2017/07/26 Javascript
JS笛卡尔积算法与多重数组笛卡尔积实现方法示例
2017/12/01 Javascript
JavaScript代码调试方法实例小结
2019/01/05 Javascript
vue 实现Web端的定位功能 获取经纬度
2019/08/08 Javascript
JavaScript实现放大镜效果代码示例
2020/04/29 Javascript
Nuxt默认模板、默认布局和自定义错误页面的实现
2020/05/11 Javascript
[01:00]DOTA2 store: Collection of Artisan's Wonders
2015/08/12 DOTA
[01:32]TI奖金增速竟因它再创新高!DOTA2勇士令状不朽珍藏Ⅰ饰品欣赏
2018/05/18 DOTA
理解Python中函数的参数
2015/04/27 Python
python实现文本去重且不打乱原本顺序
2016/01/26 Python
对python3 sort sorted 函数的应用详解
2019/06/27 Python
Python基于OpenCV实现人脸检测并保存
2019/07/23 Python
用python wxpy管理微信公众号并利用微信获取自己的开源数据
2019/07/30 Python
基于python分析你的上网行为 看看你平时上网都在干嘛
2019/08/13 Python
Python实现迪杰斯特拉算法并生成最短路径的示例代码
2020/12/01 Python
Html5画布_动力节点Java学院整理
2017/07/13 HTML / CSS
Manuka Doctor英国官网:真正的麦卢卡蜂蜜和护肤品
2018/10/26 全球购物
EJB的角色和三个对象
2015/12/31 面试题
材料成型专业个人求职信范文
2013/09/25 职场文书
学前教育毕业生自荐信范文
2013/12/24 职场文书
运动会加油稿100字
2014/09/19 职场文书
2015年“7.11”世界人口日宣传活动方案
2015/05/06 职场文书
毕业论文致谢信
2015/05/14 职场文书
MySQL快速插入一亿测试数据
2021/06/23 MySQL