使用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代码超级推荐
Apr 05 Javascript
jQuery ui插件的使用方法代码实例
May 08 Javascript
js使用for循环与innerHTML获取选中tr下td值
Sep 26 Javascript
js实现div在页面拖动效果
May 04 Javascript
使用JS正则表达式 替换括号,尖括号等
Nov 29 Javascript
详解mpvue scroll-view自动回弹bug解决方案
Oct 01 Javascript
Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
May 28 Javascript
vue使用websocket的方法实例分析
Jun 22 Javascript
关于JS解构的5种有趣用法
Sep 05 Javascript
JS实现网页烟花动画效果
Mar 10 Javascript
javascript设计模式 ? 代理模式原理与用法实例分析
Apr 16 Javascript
JS字符串补全方法padStart()和padEnd()
May 27 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
linux下使用ThinkPHP需要注意大小写导致的问题
2011/08/02 PHP
PHP中SESSION的注销与清除
2015/04/16 PHP
php中smarty模板条件判断用法实例
2015/06/11 PHP
WordPress中用于获取文章信息以及分类链接的函数用法
2015/12/18 PHP
学习PHP session的传递方式
2016/06/15 PHP
javascript实现的距离现在多长时间后的一个格式化的日期
2009/10/29 Javascript
javascript判断机器是否联网的2种方法
2013/08/09 Javascript
jquery 操作css样式、位置、尺寸方法汇总
2014/11/28 Javascript
javascript实现验证IP地址等相关信息代码
2015/05/10 Javascript
jQuery实现文件上传进度条特效
2015/08/12 Javascript
JS实现简单的tab切换选项卡效果
2016/09/21 Javascript
jQuery图片轮播功能实例代码
2017/01/29 Javascript
js实现移动端微信页面禁止字体放大
2017/02/16 Javascript
细说webpack源码之compile流程-入口函数run
2017/12/26 Javascript
JavaScript事件概念详解(区分静态注册和动态注册)
2021/02/05 Javascript
windows下安装python paramiko模块的代码
2013/02/10 Python
python文件和目录操作函数小结
2014/07/11 Python
Python 读写文件和file对象的方法(推荐)
2016/09/12 Python
Python3使用PyQt5制作简单的画板/手写板实例
2017/10/19 Python
Python读写docx文件的方法
2018/05/08 Python
python numpy元素的区间查找方法
2018/11/14 Python
python使用mitmproxy抓取浏览器请求的方法
2019/07/02 Python
Python 列表去重去除空字符的例子
2019/07/20 Python
面向对象学习之pygame坦克大战
2019/09/11 Python
利用Python校准本地时间的方法教程
2019/10/31 Python
python中栈的原理及实现方法示例
2019/11/27 Python
Django 批量插入数据的实现方法
2020/01/12 Python
2020新版本pycharm+anaconda+opencv+pyqt环境配置学习笔记,亲测可用
2020/03/24 Python
python爬虫用request库处理cookie的实例讲解
2021/02/20 Python
荷兰最大的儿童服装店:The Kids Republic
2019/04/13 全球购物
高中班长自我鉴定
2013/12/20 职场文书
书法比赛获奖感言
2014/02/10 职场文书
中国梦演讲稿5分钟
2014/08/19 职场文书
开展党的群众路线教育实践活动工作总结
2014/11/05 职场文书
幸福终点站观后感
2015/06/04 职场文书
Python爬取用户观影数据并分析用户与电影之间的隐藏信息!
2021/06/29 Python