使用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 相关文章推荐
JS方法调用括号的问题探讨
Jan 24 Javascript
JQuery1.8 判断元素是否绑定事件的方法
Jul 10 Javascript
jQuery制作简单柱状图实例
Jan 28 Javascript
javascript合并表格单元格实例代码
Jan 03 Javascript
图解prototype、proto和constructor的三角关系
Jul 31 Javascript
Javascript实现前端简单的路由实例
Sep 11 Javascript
js改变html的原有内容实现方法
Oct 05 Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
Nov 18 Javascript
详解Vue 事件驱动和依赖追踪
Apr 22 Javascript
解决vue 路由变化页面数据不刷新的问题
Mar 13 Javascript
JS实现可用滑块滑动的缓动图代码
Sep 01 Javascript
JavaScript冒泡算法原理与实现方法深入理解
Jun 04 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对数组排序代码分享
2014/02/24 PHP
Yii中CGridView实现批量删除的方法
2015/12/28 PHP
PHP7新增运算符用法实例分析
2016/09/26 PHP
三个思路解决laravel上传文件报错:413 Request Entity Too Large问题
2017/11/13 PHP
php连接MSsql server的五种方法总结
2018/03/04 PHP
PHP实现普通hash分布式算法简单示例
2018/08/06 PHP
PHP时间戳和日期相互转换操作实例小结
2018/12/18 PHP
php-fpm超时时间设置request_terminate_timeout资源问题分析
2019/09/27 PHP
Google Map Api和GOOGLE Search Api整合实现代码
2009/07/18 Javascript
google 搜索框添加关键字实现代码
2010/04/24 Javascript
jquery ajax abort()的使用方法
2010/10/28 Javascript
jquery css 设置table的奇偶行背景色示例
2014/06/03 Javascript
JQuery.Ajax()的data参数类型实例详解
2015/11/20 Javascript
原生JS实现拖拽图片效果
2020/08/27 Javascript
JavaScript算法系列之快速排序(Quicksort)算法实例详解
2016/09/04 Javascript
JS控制HTML元素的显示和隐藏的两种方法
2016/09/27 Javascript
js实现多张图片延迟加载效果
2017/07/17 Javascript
Node中使用ES6语法的基础教程
2018/01/05 Javascript
Vue使用vue-area-linkage实现地址三级联动效果的示例
2018/06/27 Javascript
JavaScript基础之静态方法和实例方法分析
2018/12/26 Javascript
基于Vue的商品主图放大镜方案详解
2019/09/19 Javascript
vue 中固定导航栏的实例代码
2019/11/01 Javascript
JavaScript中继承原理与用法实例入门
2020/05/09 Javascript
浅谈vue websocket nodeJS 进行实时通信踩到的坑
2020/09/22 NodeJs
Pytorch自己加载单通道图片用作数据集训练的实例
2020/01/18 Python
Django之富文本(获取内容,设置内容方式)
2020/05/21 Python
css3 flex布局 justify-content:space-between 最后一行左对齐
2020/01/02 HTML / CSS
以实惠的价格轻松租车,免费取消:Easyrentcars
2019/07/16 全球购物
Python面试题集
2012/03/08 面试题
毕业生自荐书
2013/12/18 职场文书
田径运动会开幕式及主持词
2014/03/28 职场文书
宪法宣传周工作方案
2014/05/26 职场文书
设备售后服务承诺书
2014/05/30 职场文书
iPhone13将有八大升级
2021/04/15 数码科技
利用python进行数据加载
2021/06/20 Python
Java数据开发辅助工具Docker与普通程序使用方法
2021/09/15 Java/Android