使用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中的escape及unescape函数的php实现代码
Sep 04 Javascript
JavaScript asp.net 获取当前超链接中的文本
Apr 14 Javascript
javascript arguments 传递给函数的隐含参数
Aug 21 Javascript
基于jquery的3d效果实现代码
Mar 23 Javascript
JavaScript高级程序设计 阅读笔记(二十一) JavaScript中的XML
Sep 14 Javascript
javascript中this的四种用法
May 11 Javascript
JS制作手机端自适应缩放显示
Jun 11 Javascript
详解JavaScript中jQuery和Ajax以及JSONP的联合使用
Aug 13 Javascript
浅析javascript中的事件代理
Nov 06 Javascript
在 Angular中 使用 Lodash 的方法
Feb 11 Javascript
AJAX在JQuery中的应用详解
Jan 30 jQuery
如何在VUE中使用vue-awesome-swiper
Jan 04 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
在IIS上安装PHP4.0正式版
2006/10/09 PHP
JS 密码强度验证(兼容IE,火狐,谷歌)
2010/03/15 Javascript
javascript静态页面传值的三种方法分享
2013/11/12 Javascript
createTextRange()的使用示例含文本框选中部分文字内容
2014/02/24 Javascript
JavaScript使用HTML5的window.postMessage实现跨域通信例子
2014/04/11 Javascript
在Node.js中实现文件复制的方法和实例
2014/06/05 Javascript
JavaScript获取页面上被选中文字的方法技巧
2015/03/13 Javascript
图片旋转、鼠标滚轮缩放、镜像、切换图片js代码
2020/12/13 Javascript
深入浅出ES6新特性之函数默认参数和箭头函数
2016/08/01 Javascript
AngularJS入门教程引导程序
2016/08/18 Javascript
AngularJS删除路由中的#符号的方法
2016/09/20 Javascript
利用yarn实现一个webpack+react种子
2016/10/25 Javascript
详解JavaScript按概率随机生成事件
2017/08/02 Javascript
react-native使用react-navigation进行页面跳转导航的示例
2017/09/07 Javascript
Three.js如何实现雾化效果示例代码
2017/09/27 Javascript
解决layUI的页面显示不全的问题
2019/09/20 Javascript
vue中如何自定义右键菜单详解
2020/12/08 Vue.js
js实现类选择器和name属性选择器的示例步骤
2021/02/07 Javascript
[50:01]Ti4 冒泡赛第二天 NEWBEE vs Titan
2014/07/15 DOTA
[49:35]KG vs SECRET 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
python3实现抓取网页资源的 N 种方法
2017/05/02 Python
Python编程之字符串模板(Template)用法实例分析
2017/07/22 Python
python实现对指定输入的字符串逆序输出的6种方法
2018/04/26 Python
Python实现的多项式拟合功能示例【基于matplotlib】
2018/05/15 Python
详解Python 多线程 Timer定时器/延迟执行、Event事件
2019/06/27 Python
详解python调用cmd命令三种方法
2019/07/08 Python
python安装gdal的两种方法
2019/10/29 Python
学习Python爬虫的几点建议
2020/08/05 Python
HTML5+CSS3模仿优酷视频截图功能示例
2017/01/05 HTML / CSS
鞋子女王塔玛拉·梅隆同名奢侈品牌:Tamara Mellon
2017/11/22 全球购物
波兰运动鞋网上商店:e-Sporting
2018/02/16 全球购物
老公给老婆的道歉信
2014/01/10 职场文书
营业用房租赁协议书
2014/11/26 职场文书
环保守法证明
2015/06/24 职场文书
2015中秋节晚会开场白
2015/07/30 职场文书
转变工作作风心得体会
2016/01/23 职场文书