使用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 相关文章推荐
网站被黑的假象--ARP欺骗之页面中加入一段js
May 16 Javascript
禁用JavaScript控制台调试的方法
Mar 07 Javascript
用简洁的jQuery方法toggleClass实现隔行换色
Oct 22 Javascript
JavaScript中通过prototype属性共享属性和方法的技巧实例
Mar 13 Javascript
js完美实现@提到好友特效(兼容各大浏览器)
Mar 16 Javascript
JavaScript手机振动API
Jun 11 Javascript
前端设计师们最常用的JS代码汇总
Sep 25 Javascript
Vue结合SignalR实现前后端实时消息同步
Sep 19 Javascript
Vue-Router实现组件间跳转的三种方法
Nov 07 Javascript
Javascript获取某个月的天数
May 30 Javascript
使用weixin-java-tools完成微信授权登录、微信支付的示例
Sep 26 Javascript
基于Vue CSR的微前端实现方案实践
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
PHP防盗链代码实例
2014/08/27 PHP
朋友网关于QQ相关的PHP代码(研究QQ的绝佳资料)
2015/01/26 PHP
WordPress中用于获取及自定义头像图片的PHP脚本详解
2015/12/17 PHP
PHP+mysql实现的三级联动菜单功能示例
2019/02/15 PHP
document.all与WEB标准
2020/05/13 Javascript
鼠标经过的文本框textbox变色
2009/05/21 Javascript
JavaScript中两个感叹号的作用说明
2011/12/28 Javascript
JS获得URL超链接的参数值实例代码
2013/06/21 Javascript
js实现幻灯片效果(基于jquery插件)
2013/11/05 Javascript
5个可以帮你理解JavaScript核心闭包和作用域的小例子
2014/10/08 Javascript
JS获取各种宽度、高度的简单介绍
2014/12/19 Javascript
jQuery判断对象是否存在的方法
2015/02/05 Javascript
浅谈jQuery的offset()方法及示例分享
2015/07/17 Javascript
javascript实现简单的页面右下角提示信息框
2015/07/31 Javascript
nodejs 中模拟实现 emmiter 自定义事件
2016/02/22 NodeJs
详解如何在vue-cli中使用vuex
2018/08/07 Javascript
Vue实现搜索结果高亮显示关键字
2019/05/28 Javascript
微信小程序 wxParse插件显示视频问题
2019/09/27 Javascript
[53:38]OG vs LGD 2018国际邀请赛淘汰赛BO3 第三场 8.26
2018/08/30 DOTA
[45:52]完美世界DOTA2联赛PWL S3 Forest vs INK ICE 第二场 12.09
2020/12/12 DOTA
Python中多线程及程序锁浅析
2015/01/21 Python
Python subprocess库的使用详解
2018/10/26 Python
Ubuntu18.04中Python2.7与Python3.6环境切换
2019/06/14 Python
python3获取当前目录的实现方法
2019/07/29 Python
Python操作Mongodb数据库的方法小结
2019/09/10 Python
python数据分析工具之 matplotlib详解
2020/04/09 Python
Python连接Hadoop数据中遇到的各种坑(汇总)
2020/04/14 Python
Python如何实现定时器功能
2020/05/28 Python
.NET现在共支持多少种语言
2014/02/26 面试题
英语教育专业自荐信
2014/05/29 职场文书
旅游与环境专业求职信
2014/06/05 职场文书
刑事上诉状(量刑过重)
2015/05/23 职场文书
2015初中教导处工作总结
2015/07/21 职场文书
大学学生会主席竞选稿怎么写?
2019/08/19 职场文书
解决go在函数退出后子协程的退出问题
2021/04/30 Golang
MySQL 那些常见的错误设计规范,你都知道吗
2021/07/16 MySQL