使用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 相关文章推荐
两个select之间option的互相添加操作(jquery实现)
Nov 12 Javascript
Extjs4 类的定义和扩展实例
Jun 28 Javascript
javacript使用break内层跳出外层循环分析
Jan 12 Javascript
深入探寻seajs的模块化与加载方式
Apr 14 Javascript
详解javascript函数的参数
Nov 10 Javascript
Vue.js中数组变动的检测详解
Oct 12 Javascript
js 点击a标签 获取a的自定义属性方法
Nov 21 Javascript
轻松理解JavaScript之AJAX
Mar 15 Javascript
微信小程序 密码输入(源码下载)
Jun 27 Javascript
JS 实现百度搜索功能
Feb 01 Javascript
vue样式穿透 ::v-deep的具体使用
Jun 04 Javascript
node.js如何根据URL返回指定的图片详解
Oct 21 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 压缩文件夹的类代码
2009/11/05 PHP
VB中的RasEnumConnections函数返回632错误解决方法
2014/07/29 PHP
Zend Framework教程之资源(Resources)用法实例详解
2016/03/14 PHP
php伪静态验证码不显示的解决方案
2019/09/26 PHP
jquery 通过name快速取值示例
2014/01/24 Javascript
JavaScript验证图片类型(扩展名)的函数分享
2014/05/05 Javascript
如何书写高质量jQuery代码(使用jquery性能问题)
2014/06/30 Javascript
一个JavaScript处理textarea中的字符成每一行实例
2014/09/22 Javascript
深入浅析AngularJS中的module(模块)
2016/01/04 Javascript
Bootstrap Modal遮罩弹出层(完整版)
2016/11/21 Javascript
ionic cordova一次上传多张图片(类似input file提交表单)的实现方法
2016/12/16 Javascript
BootStrap 页签切换失效的解决方法
2017/08/17 Javascript
浅谈vuepress 踩坑记
2018/04/18 Javascript
vuex提交state&amp;&amp;实时监听state数据的改变方法
2018/09/16 Javascript
详解js获取video任意时间的画面截图
2019/04/17 Javascript
vue-cli在 history模式下的配置详解
2019/11/26 Javascript
vue+element UI实现树形表格
2020/12/29 Vue.js
[01:06:18]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第二场 1月26日
2021/03/11 DOTA
python使用Berkeley DB数据库实例
2014/09/26 Python
Python实现简单字典树的方法
2016/04/29 Python
Python实现判断一个字符串是否包含子串的方法总结
2017/11/21 Python
Python实现的朴素贝叶斯算法经典示例【测试可用】
2018/06/13 Python
Flask之flask-script模块使用
2018/07/26 Python
wxPython的安装与使用教程
2018/08/31 Python
python opencv判断图像是否为空的实例
2019/01/26 Python
python批量处理文件或文件夹
2020/07/28 Python
PyCharm2019安装教程及其使用(图文教程)
2019/09/29 Python
Django文件上传与下载(FileFlid)
2019/10/06 Python
安装python及pycharm的教程图解
2019/10/10 Python
Python程序控制语句用法实例分析
2020/01/14 Python
Python编程快速上手——疯狂填词程序实现方法分析
2020/02/29 Python
python怎么删除缓存文件
2020/07/19 Python
Java爬虫技术框架之Heritrix框架详解
2020/07/22 Python
岗位职责范本
2013/11/23 职场文书
超市端午节活动方案
2014/01/23 职场文书
2014年变电站工作总结
2014/12/19 职场文书