使用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资料prototype 属性
Mar 13 Javascript
理解Javascript_05_原型继承原理
Oct 13 Javascript
Jquery练习之表单验证实现代码
Dec 14 Javascript
javascript unicode与GBK2312(中文)编码转换方法
Nov 14 Javascript
自定义的一个简单时尚js下拉选择框
Nov 20 Javascript
js跨域访问示例(客户端/服务端)
May 19 Javascript
JavaScript Math.ceil 方法(对数值向上取整)
Jan 09 Javascript
JavaScript 事件入门知识
Apr 13 Javascript
学习JavaScript设计模式之责任链模式
Jan 18 Javascript
React Native中TabBarIOS的简单使用方法示例
Oct 13 Javascript
解决vue 打包发布去#和页面空白的问题
Sep 04 Javascript
Vue过滤器,生命周期函数和vue-resource简单介绍
Jan 12 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
drupal 代码实现URL重写
2011/05/04 PHP
php实现多张图片上传加水印技巧
2013/04/18 PHP
一个PHP的远程图片抓取函数分享
2013/09/25 PHP
从零开始学YII2框架(五)快速生成代码工具 Gii 的使用
2014/08/20 PHP
基于PHP实现短信验证码接口(容联运通讯)
2016/09/06 PHP
PHP如何将图片文件上传到另外一台服务器上
2019/08/26 PHP
Thinkphp5.0 框架使用模型Model添加、更新、删除数据操作详解
2019/10/11 PHP
javascript计算用户打开网页的停留时间
2014/01/09 Javascript
浅谈js中对象的使用
2016/08/11 Javascript
郁闷!ionic中获取ng-model绑定的值为undefined如何解决
2016/08/27 Javascript
详解webpack分离css单独打包
2017/06/21 Javascript
webpack dll打包重复问题优化的解决
2018/10/10 Javascript
微信小程序实现带放大效果的轮播图
2020/05/26 Javascript
javascript开发实现贪吃蛇游戏
2020/07/31 Javascript
解决vue自定义指令导致的内存泄漏问题
2020/08/04 Javascript
浅谈es6中的元编程
2020/12/01 Javascript
Swift中的协议(protocol)学习教程
2016/07/08 Python
Python 中字符串拼接的多种方法
2018/07/30 Python
python制作mysql数据迁移脚本
2019/01/01 Python
python批量识别图片指定区域文字内容
2019/04/30 Python
Django框架使用mysql视图操作示例
2019/05/15 Python
python3.7简单的爬虫实例详解
2019/07/08 Python
使用Django xadmin 实现修改时间选择器为不可输入状态
2020/03/30 Python
python switch 实现多分支选择功能
2020/12/21 Python
英国领先的豪华时尚家居网上商店:Amara
2019/08/12 全球购物
LUISAVIAROMA德国官网:时尚奢侈品牌购物网站
2020/11/12 全球购物
应届生的求职推荐信范文
2013/11/30 职场文书
软件毕业生个人鉴定
2014/03/03 职场文书
关于安全演讲稿
2014/05/09 职场文书
毕业典礼演讲稿
2014/05/13 职场文书
办理房产过户的委托书
2014/09/14 职场文书
关于十八大的演讲稿
2014/09/15 职场文书
父亲去世追悼词
2015/06/23 职场文书
中秋节作文(五年级)之关于月亮
2019/09/11 职场文书
Pytorch 如何实现常用正则化
2021/05/27 Python
python爬取某网站原图作为壁纸
2021/06/02 Python