使用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 相关文章推荐
基于jquery的bankInput银行卡账号格式化
Aug 22 Javascript
JavaScript中:表达式和语句的区别[译]
Sep 17 Javascript
基于JavaScript操作DOM常用的API小结
Dec 01 Javascript
基于bootstrap风格的弹框插件
Dec 28 Javascript
javascript监听页面刷新和页面关闭事件方法详解
Jan 09 Javascript
JS二叉树的简单实现方法示例
Apr 05 Javascript
将 vue 生成的 js 上传到七牛的实例
Jul 28 Javascript
JavaScript实现图片本地预览功能【不用上传至服务器】
Sep 20 Javascript
js经验分享 JavaScript反调试技巧
Mar 10 Javascript
webpack4 处理CSS的方法示例
Sep 03 Javascript
JS返回页面时自动回滚到历史浏览位置
Sep 26 Javascript
Vue项目查看当前使用的elementUI版本的方法
Sep 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
phpize的深入理解
2013/06/03 PHP
PHP 实现explort() 功能的详解
2013/06/20 PHP
php漏洞之跨网站请求伪造与防止伪造方法
2013/08/15 PHP
php class类的用法详细总结
2013/10/17 PHP
php中smarty变量修饰用法实例分析
2015/06/11 PHP
Zend Framework处理Json数据方法详解
2016/12/09 PHP
PHP的微信支付接口使用方法讲解
2019/03/08 PHP
初识javascript 文档碎片
2010/07/13 Javascript
js实现图片放大缩小功能后进行复杂排序的方法
2012/11/08 Javascript
JS中使用Array函数shift和pop创建可忽略参数的例子
2014/05/28 Javascript
javascript数组输出的两种方式
2015/01/13 Javascript
AngularJS 模块化详解及实例代码
2016/09/14 Javascript
js 性能优化之快速响应的用户界面
2017/02/15 Javascript
Vue 2.0+Vue-router构建一个简单的单页应用(附源码)
2017/03/14 Javascript
vue编译打包本地查看index文件的方法
2018/02/23 Javascript
20个最常见的jQuery面试问题及答案
2018/05/23 jQuery
基于rollup的组件库打包体积优化小结
2018/06/18 Javascript
JS实现图片上传多次上传同一张不生效的处理方法
2018/08/06 Javascript
Koa从零搭建到Api实现项目的搭建方法
2019/07/30 Javascript
ES10的13个新特性示例(小结)
2019/09/23 Javascript
Vue实现剪贴板复制功能
2019/12/31 Javascript
详解微信小程序轨迹回放实现及遇到的坑
2021/02/02 Javascript
Python中is与==判断的区别
2017/03/28 Python
更新修改后的Python模块方法
2019/03/03 Python
用pyqt5 给按钮设置图标和css样式的方法
2019/06/24 Python
python读取xml文件方法解析
2020/08/04 Python
PyTorch如何搭建一个简单的网络
2020/08/24 Python
django inspectdb 操作已有数据库数据的使用步骤
2021/02/07 Python
html5中使用hotcss.js实现手机端自适配的方法
2020/04/23 HTML / CSS
约瑟夫·特纳男装:Joseph Turner
2017/10/10 全球购物
成人教育自我鉴定
2013/11/01 职场文书
《孔子游春》教学反思
2014/02/25 职场文书
公司文体活动总结
2015/05/07 职场文书
销区经理年终述职报告模板
2019/11/28 职场文书
在HTML5 localStorage中存储对象的示例代码
2021/04/21 Javascript
美元符号 $
2022/02/17 杂记