使用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 相关文章推荐
return false;和e.preventDefault();的区别
Jul 11 Javascript
几个有趣的Javascript Hack
Jul 24 Javascript
JavaScript中的style.cssText使用教程
Nov 06 Javascript
JS操作HTML自定义属性的方法
Feb 10 Javascript
jQuery EasyUI 菜单与按钮之创建简单的菜单和链接按钮
Nov 18 Javascript
JS动态的把左边列表添加到右边的实现代码(可上下移动)
Nov 17 Javascript
AngularJS控制器controller给模型数据赋初始值的方法
Jan 04 Javascript
详解Node.js access_token的获取、存储及更新
Jun 20 Javascript
微信小程序画布圆形进度条显示效果
Nov 17 Javascript
基于Vue实现可以拖拽的树形表格实例详解
Oct 18 Javascript
Node.js API详解之 string_decoder用法实例分析
Apr 29 Javascript
vue Treeselect下拉树只能选择第N级元素实现代码
Aug 31 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
php读取30天之内的根据算法排序的代码
2008/04/06 PHP
PHP消息队列用法实例分析
2016/02/12 PHP
简单实现PHP留言板功能
2016/12/21 PHP
Laravel 框架返回状态拦截代码
2019/10/18 PHP
使用JQUERY Tabs插件宿主IFRAMES
2010/01/01 Javascript
JavaScript 原型继承之构造函数继承
2011/08/26 Javascript
Jquery网页出现的乱码问题的三种解决方法
2013/06/30 Javascript
js导出table数据到excel即导出为EXCEL文档的方法
2013/10/10 Javascript
jQuery 滑动方法slideDown向下滑动元素
2014/01/16 Javascript
js控制div弹出层实现方法
2015/05/11 Javascript
jQuery模拟黑客帝国矩阵效果实例
2015/06/28 Javascript
解读Bootstrap v4 sass设计
2016/05/29 Javascript
AngulerJS学习之按需动态加载文件
2017/02/13 Javascript
jQuery开源组件BootstrapValidator使用详解
2017/06/29 jQuery
详解ES6 Fetch API HTTP请求实用指南
2018/11/14 Javascript
Node.js一行代码实现静态文件服务器的方法步骤
2019/05/07 Javascript
python通过floor函数舍弃小数位的方法
2015/03/17 Python
python根据开头和结尾字符串获取中间字符串的方法
2015/03/26 Python
Python装饰器用法示例小结
2018/02/11 Python
Python安装图文教程 Pycharm安装教程
2018/03/27 Python
Python3 实现随机生成一组不重复数并按行写入文件
2018/04/09 Python
python主线程捕获子线程的方法
2018/06/17 Python
django数据关系一对多、多对多模型、自关联的建立
2019/07/24 Python
解决django model修改添加字段报错的问题
2019/11/18 Python
基于python纯函数实现井字棋游戏
2020/05/27 Python
通过实例简单了解python yield使用方法
2020/08/06 Python
python Matplotlib数据可视化(2):详解三大容器对象与常用设置
2020/09/30 Python
菲律宾酒店预订网站:Hotels.com菲律宾
2017/07/12 全球购物
LVMH旗下最大的奢侈品网站平台:24S
2020/05/24 全球购物
教育学专业实习生的自我鉴定
2013/11/26 职场文书
学期评语大全
2014/04/30 职场文书
拓展策划方案
2014/06/03 职场文书
解除施工合同协议书
2014/10/17 职场文书
优秀学生干部事迹材料
2014/12/24 职场文书
python tqdm用法及实例详解
2021/06/16 Python
Python+Matplotlib+LaTeX玩转数学公式
2022/02/24 Python