使用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插件 easyUI属性汇总
Jan 19 Javascript
浅谈javascript的调试
Jan 28 Javascript
利用HTML5+Socket.io实现摇一摇控制PC端歌曲切换
Jan 13 Javascript
浅谈Angular路由守卫
Aug 26 Javascript
Angular简单验证功能示例
Dec 22 Javascript
node puppeteer(headless chrome)实现网站登录
May 09 Javascript
vue如何进行动画的封装
Sep 26 Javascript
Vue resource三种请求格式和万能测试地址
Sep 26 Javascript
js笔试题-接收get请求参数
Jun 15 Javascript
Vue.js watch监视属性知识点总结
Nov 11 Javascript
详解node和ES6的模块导出与导入
Feb 19 Javascript
Handtrack.js库实现实时监测手部运动(推荐)
Feb 08 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 将bmp图片转为jpg等其他任意格式的图片
2009/06/21 PHP
php采用curl实现伪造IP来源的方法
2014/11/21 PHP
php中JSON的使用与转换
2015/01/14 PHP
thinkphp3.2同时连接两个数据库的简单方法
2019/08/13 PHP
详解阿里云视频直播PHP-SDK接入教程
2020/07/09 PHP
jQuery 页面载入进度条实现代码
2009/02/08 Javascript
js如何获取file控件的完整路径具体实现代码
2013/05/15 Javascript
JS实现拖动示例代码
2013/11/01 Javascript
js 模式窗口(模式对话框和非模式对话框)的使用介绍
2014/07/17 Javascript
JavaScript Math.floor方法(对数值向下取整)
2015/01/09 Javascript
JavaScript 学习笔记之操作符
2015/01/14 Javascript
jQuery动画与特效详解
2015/02/01 Javascript
jQuery中通过ajax调用webservice传递数组参数的问题实例详解
2016/05/20 Javascript
jquery实现全选、全不选以及单选功能
2017/03/23 jQuery
微信小程序实现的日期午别医生排班表功能示例
2019/01/09 Javascript
浅谈Javascript常用正则表达式应用
2019/03/08 Javascript
layui下拉列表select实现可输入查找的方法
2019/09/28 Javascript
Vue实现按钮级权限方案
2019/11/21 Javascript
js实现带箭头的进度流程
2020/03/26 Javascript
vue内置组件keep-alive事件动态缓存实例
2020/10/30 Javascript
Python类属性的延迟计算
2016/10/22 Python
python验证码识别教程之利用滴水算法分割图片
2018/06/05 Python
节日快乐! Python画一棵圣诞树送给你
2019/12/24 Python
使用PyTorch训练一个图像分类器实例
2020/01/08 Python
Python调用C语言程序方法解析
2020/07/07 Python
Python爬虫scrapy框架Cookie池(微博Cookie池)的使用
2021/01/13 Python
html5 viewport使用方法示例详解
2013/12/02 HTML / CSS
如何开启linux的ssh服务
2013/06/03 面试题
应聘教师推荐信
2013/10/31 职场文书
给同事的道歉信
2014/01/11 职场文书
大三毕业自我鉴定
2014/01/15 职场文书
探矿工程师自荐信
2014/01/24 职场文书
法制宣传教育方案
2014/05/09 职场文书
销售员自我评价
2015/03/11 职场文书
2015年机关作风和效能建设工作总结
2015/07/23 职场文书
Python 线程池模块之多线程操作代码
2021/05/20 Python