使用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 相关文章推荐
jquery+easeing实现仿flash的载入动画
Mar 10 Javascript
javascript实现很浪漫的气泡冒出特效
Sep 05 Javascript
JavaScript学习笔记整理之引用类型
Jan 22 Javascript
jQuery控制li上下循环滚动插件用法实例(附demo源码下载)
May 28 Javascript
Vue.js实现简单ToDoList 前期准备(一)
Dec 01 Javascript
JS实现的简单轮播图运动效果示例
Dec 22 Javascript
使用DeviceOne实现微信小程序功能
Dec 29 Javascript
JavaScript中Promise的使用详解
Feb 26 Javascript
js实现数字递增特效【仿支付宝我的财富】
May 05 Javascript
vue项目中仿element-ui弹框效果的实例代码
Apr 22 Javascript
解决vue项目刷新后,导航菜单高亮显示的位置不对问题
Nov 01 Javascript
Node.js API详解之 dns模块用法实例分析
May 15 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结合ACCESS的跨库查询功能
2015/06/12 PHP
PHP实现抓取迅雷VIP账号的方法
2015/07/30 PHP
[原创]PHP正则匹配中英文、数字及下划线的方法【用户名验证】
2017/08/01 PHP
PHP数组Key强制类型转换实现原理解析
2020/09/01 PHP
jquery $.fn $.fx是什么意思有什么用
2013/11/04 Javascript
jquery解析xml字符串简单示例
2014/04/11 Javascript
详细分析JavaScript函数定义
2015/07/16 Javascript
JavaScript正则表达式的分组匹配详解
2016/02/13 Javascript
JavaScript判断是否是微信浏览器
2016/06/13 Javascript
关于动态执行代码(js的Eval)实例详解
2016/08/15 Javascript
js 自带的sort() 方法全面了解
2016/08/16 Javascript
JS使用正则截取两个字符串之间的字符串实现方法详解
2017/01/06 Javascript
Express与NodeJs创建服务器的两种方法
2017/02/06 NodeJs
react-router实现按需加载
2017/05/09 Javascript
详解使用vue-admin-template的优化历程
2018/05/20 Javascript
element ui 表格动态列显示空白bug 修复方法
2018/09/04 Javascript
详解vue中async-await的使用误区
2018/12/05 Javascript
微信小程序websocket实现即时聊天功能
2019/05/21 Javascript
nodejs实现聊天机器人功能
2019/09/19 NodeJs
NUXT SSR初级入门笔记(小结)
2019/12/16 Javascript
node.js基于dgram数据报模块创建UDP服务器和客户端操作示例
2020/02/12 Javascript
使用原生JS实现滚轮翻页效果的示例代码
2020/05/31 Javascript
vue 解决addRoutes多次添加路由重复的操作
2020/08/04 Javascript
Python使用内置json模块解析json格式数据的方法
2017/07/20 Python
python使用Paramiko模块实现远程文件拷贝
2019/04/30 Python
Python实现敏感词过滤的4种方法
2020/09/12 Python
HTML5的一个显示电池状态的API简介
2015/06/18 HTML / CSS
HTML5中判断横屏竖屏的方法(移动端)
2016/08/04 HTML / CSS
芬兰灯具网上商店:Nettilamppu.fi
2018/06/30 全球购物
情侣吵架检讨书
2014/02/05 职场文书
乡镇总工会学雷锋活动总结
2014/03/01 职场文书
群众路线教育党课主持词
2014/04/01 职场文书
学院党委班子四风问题自查报告及整改措施
2014/10/25 职场文书
初三英语教学计划
2015/01/23 职场文书
通知的写法
2015/04/23 职场文书
Python实现老照片修复之上色小技巧
2021/10/16 Python