使用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 相关文章推荐
ppk谈JavaScript style属性
Oct 10 Javascript
javascript按位非运算符的使用方法
Nov 14 Javascript
JS如何判断移动端访问设备并解析对应CSS
Nov 27 Javascript
jQuery中scrollLeft()方法用法实例
Jan 16 Javascript
JavaScript贪吃蛇小组件实例代码
Aug 20 Javascript
Vue中用props给data赋初始值遇到的问题解决
Nov 27 Javascript
Fundebug支持监控微信小程序HTTP请求错误的方法
Feb 21 Javascript
Node.js中Koa2在控制台输出请求日志的方法示例
May 02 Javascript
vue路由守卫,限制前端页面访问权限的例子
Nov 11 Javascript
vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
Aug 28 Javascript
利用js实现简易红绿灯
Oct 15 Javascript
vue3中provide && inject的使用
Jul 01 Vue.js
常用的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 mssql 数据库分页SQL语句
2008/12/16 PHP
学习使用curl采集curl使用方法
2012/01/11 PHP
PHP5.2下preg_replace函数的问题
2015/05/08 PHP
使用js正则控制input标签只允许输入的值
2013/07/29 Javascript
使用JavaScript和C#中获得referer
2014/11/14 Javascript
jQuery表单域属性过滤器用法分析
2015/02/10 Javascript
JQuery控制radio选中和不选中方法总结
2015/04/15 Javascript
js显示文本框提示文字的方法
2015/05/07 Javascript
JavaScript中setMonth()方法的使用详解
2015/06/11 Javascript
微信小程序开发之toast提示插件使用示例
2017/06/08 Javascript
react-native滑动吸顶效果的实现过程
2019/06/03 Javascript
Vue——前端生成二维码的示例
2020/12/19 Vue.js
[10:42]Team Liquid Vs Newbee
2018/06/07 DOTA
深入理解python对json的操作总结
2017/01/05 Python
Python中应该使用%还是format来格式化字符串
2018/09/25 Python
解决python3 安装完Pycurl在import pycurl时报错的问题
2018/10/15 Python
python调用其他文件函数或类的示例
2019/07/16 Python
Python函数装饰器原理与用法详解
2019/08/16 Python
python 实现按对象传值
2019/12/26 Python
Python如何获取Win7,Win10系统缩放大小
2020/01/10 Python
Python跑循环时内存泄露的解决方法
2020/01/13 Python
python os.rename实例用法详解
2020/12/06 Python
python UIAutomator2使用超详细教程
2021/02/19 Python
澳大利亚最大的在线美发和美容零售商之一:My Hair Care & Beauty
2019/08/24 全球购物
英国健身专家:WIT Fitness
2021/02/09 全球购物
机械专业应届生求职信
2013/12/12 职场文书
三爱活动实施方案
2014/03/19 职场文书
《神奇的克隆》教学反思
2014/04/10 职场文书
2014年会计主管工作总结
2014/12/20 职场文书
先进个人推荐材料
2014/12/29 职场文书
2015年世界卫生日活动总结
2015/02/09 职场文书
小学班主任教育随笔
2015/08/15 职场文书
高一语文教学反思
2016/02/16 职场文书
为什么node.js不适合大型项目
2021/04/28 Javascript
Vue接口封装的完整步骤记录
2021/05/14 Vue.js
Python使用plt.boxplot()函数绘制箱图、常用方法以及含义详解
2022/08/14 Python