javascript实现框架高度随内容改变的方法


Posted in Javascript onJuly 23, 2015

本文实例讲述了javascript实现框架高度随内容改变的方法。分享给大家供大家参考。具体如下:

有两种方法:

一、就是通过父页面改变

这里要理解框架的两个属性 contentWindow 和contentDocument 两个属性的意思和window document意思差不多,不同的是contentWindow 所有浏览器都支持,contentDocument   ie6,7不支持,chrome 也不支持

<iframe onload="change_height()"></iframe>
function change_height(){
  var iframe=document.getElementById("iframe_id");
  //取得框架元素
  var i_height=iframe.contentWindow.document.body.scrollHeight||iframe.contentWindow.document.documentElement.scrollHeight;
  //取得框架内容的高度
  iframe.height=i_height;
  //改变
}

二、就是通过内容改变

在内容页进行

window.onload=function(){
  var iframe=parent.document.getElementById("iframe_id");
  //取得框架元素
  iframe.height=document.body.scrollHeight||document.documentElement.scrollHeight;
  //取得框架内容的高度并改变
}

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
5款Javascript颜色选择器
Oct 25 Javascript
让div层随鼠标移动的实现代码 ie ff
Dec 18 Javascript
基于jQuery的message插件实现右下角弹出消息框
Jan 11 Javascript
jQuery手机浏览器中拖拽动作的艰难性分析
Feb 04 Javascript
jQuery使用toggleClass方法动态添加删除Class样式的方法
Mar 26 Javascript
浅谈node中的exports与module.exports的关系
Aug 01 Javascript
webpack多入口文件页面打包配置详解
Jan 09 Javascript
使用async-validator编写Form组件的方法
Jan 10 Javascript
Vue 中使用vue2-highcharts实现曲线数据展示的方法
Mar 05 Javascript
vue动态绑定class的几种常用方式小结
May 21 Javascript
基于JS实现计算24点算法代码实例解析
Jul 23 Javascript
antd多选下拉框一行展示的实现方式
Oct 31 Javascript
js正则表达式中exec用法实例
Jul 23 #Javascript
JavaScript实现获得所有兄弟节点的方法
Jul 23 #Javascript
使用jquery实现仿百度自动补全特效
Jul 23 #Javascript
代码分析jQuery四种静态方法使用
Jul 23 #Javascript
javascript实现状态栏文字首尾相接循环滚动的方法
Jul 22 #Javascript
HTML5实现留言和回复页面样式
Jul 22 #Javascript
javascript控制层显示或隐藏的方法
Jul 22 #Javascript
You might like
改写函数实现PHP二维/三维数组转字符串
2013/09/13 PHP
深入浅析Yii admin的权限控制
2016/08/31 PHP
PHP简单留言本功能实现代码
2017/06/09 PHP
laravel框架实现去掉URL中index.php的方法
2019/10/12 PHP
php+layui数据表格实现数据分页渲染代码
2019/10/26 PHP
Nigma vs Alliance BO5 第二场2.14
2021/03/10 DOTA
JavaScript进阶教程(第四课第一部分)
2007/04/05 Javascript
javascript 单例/单体模式(Singleton)
2011/04/07 Javascript
jquery 插件学习(三)
2012/08/06 Javascript
JavaScript创建对象的写法
2013/08/29 Javascript
JAVASCRIPT模式窗口中下载文件无法接收iframe的流
2013/10/11 Javascript
JavaScript中instanceof与typeof运算符的用法及区别详细解析
2013/11/19 Javascript
JS去掉第一个字符和最后一个字符的实现代码
2014/02/20 Javascript
使用JavaScript判断图片是否加载完成的三种实现方式
2014/05/04 Javascript
jQuery实现鼠标滑过点击事件音效试听
2015/08/31 Javascript
AngularJS中实现用户访问的身份认证和表单验证功能
2016/04/21 Javascript
【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)
2016/06/07 Javascript
js HTML5上传示例代码完整版
2016/10/10 Javascript
JS声明式函数与赋值式函数实例分析
2016/12/13 Javascript
JavaScript中闭包的详解
2017/04/01 Javascript
nodejs操作mongodb的增删改查功能实例
2017/11/09 NodeJs
[49:18]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 OG vs TNC
2018/04/01 DOTA
Django查找网站项目根目录和对正则表达式的支持
2015/07/15 Python
使用实现pandas读取csv文件指定的前几行
2018/04/20 Python
python 读取目录下csv文件并绘制曲线v111的方法
2018/07/06 Python
Django后台admin的使用详解
2019/07/08 Python
Python 基于wxpy库实现微信添加好友功能(简洁)
2019/11/29 Python
pytorch查看模型weight与grad方式
2020/06/24 Python
AmazeUI中模态框的实现
2020/08/19 HTML / CSS
美国知名玩具品牌:Melissa & Doug
2016/08/16 全球购物
Bealls Florida百货商店:生活服饰、家居装饰和鞋子
2018/02/23 全球购物
物流仓管员工作职责
2014/01/06 职场文书
副校长个人对照检查材料思想汇报
2014/10/04 职场文书
python 爬取豆瓣网页的示例
2021/04/13 Python
一篇文章弄懂Python中的内建函数
2021/08/07 Python
TV动画《史上最强大魔王转生为村民A》番宣CM公布
2022/04/01 日漫