使用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 相关文章推荐
javascript removeChild 使用注意事项
Apr 11 Javascript
javascript 鼠标拖动图标技术
Feb 07 Javascript
怎样在JavaScript里写一个swing把数据插入数据库
Dec 10 Javascript
jQuery结合HTML5制作的爱心树表白动画
Feb 01 Javascript
个人总结的一些JavaScript技巧、实用函数、简洁方法、编程细节
Jun 10 Javascript
AngularJs学习第八篇 过滤器filter创建
Jun 08 Javascript
详解Node.js:events事件模块
Nov 24 Javascript
JavaScript实现按键精灵的原理分析
Feb 21 Javascript
Node.js中的child_process模块详解
Jun 08 Javascript
JavaScript常见事件处理程序实例总结
Jan 05 Javascript
微信小程序公用参数与公用方法用法示例
Jan 09 Javascript
layui数据表格重载实现往后台传参
Nov 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 Session变量不能传送到下一页的解决方法
2009/11/27 PHP
浅析PHP substr,mb_substr以及mb_strcut的区别和用法
2013/06/21 PHP
CI框架扩展系统核心类的方法分析
2016/05/23 PHP
Laravel利用gulp如何构建前端资源详解
2018/06/03 PHP
PHP实现浏览器格式化显示XML的方法示例
2019/01/22 PHP
this[] 指的是什么内容 讨论
2007/03/24 Javascript
刷新页面实现方式总结(HTML,ASP,JS)
2008/11/13 Javascript
数组方法解决JS字符串连接性能问题有争议
2011/01/12 Javascript
CodeMirror2 IE7/IE8 下面未知运行时错误的解决方法
2012/03/29 Javascript
angularjs中的e2e测试实例
2014/12/06 Javascript
基于JavaScript实现动态添加删除表格的行
2016/02/01 Javascript
jQuery实现获取元素索引值index的方法
2016/09/18 Javascript
jQuery旋转插件jqueryrotate用法详解
2016/10/13 Javascript
利用Node.js编写跨平台的spawn语句详解
2017/02/12 Javascript
常用的js方法合集
2017/03/10 Javascript
在Vue 中使用Typescript的示例代码
2018/09/10 Javascript
原生js实现淘宝放大镜效果
2020/10/28 Javascript
VueJS 组件参数名命名与组件属性转化问题
2018/12/03 Javascript
Nodejs监听日志文件的变化的过程解析
2019/08/04 NodeJs
vue中的v-if和v-show的区别详解
2019/09/01 Javascript
微信小程序开发(二):页面跳转并传参操作示例
2020/06/01 Javascript
微信小程序视频弹幕发送功能的实现
2020/12/28 Javascript
[03:18]DOTA2放量测试专访820:希望玩家加入国服大家庭
2013/08/25 DOTA
python多线程抓取天涯帖子内容示例
2014/04/03 Python
python中使用xlrd读excel使用xlwt写excel的实例代码
2018/01/31 Python
Python语言的变量认识及操作方法
2018/02/11 Python
python3调用百度翻译API实现实时翻译
2018/08/16 Python
解决django 向mysql中写入中文字符出错的问题
2020/05/18 Python
python爬虫基础之urllib的使用
2020/12/31 Python
通过HTML5 Canvas API绘制弧线和圆形的教程
2016/03/14 HTML / CSS
阿迪达斯奥地利官方商城:adidas.at
2016/10/16 全球购物
阿迪达斯荷兰官方网站:adidas荷兰
2018/03/16 全球购物
Linux中如何用命令创建目录
2015/01/12 面试题
上课迟到检讨书100字
2014/01/11 职场文书
采购人员的个人自我评价
2014/01/16 职场文书
js前端面试常见浏览器缓存强缓存及协商缓存实例
2022/06/21 Javascript