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 相关文章推荐
Jquery工作常用实例 使用AJAX使网页进行异步更新
Jul 26 Javascript
ASP.NET jQuery 实例4(复制TextBox的文本到本地剪贴板上)
Jan 13 Javascript
Javascript 异步加载详解(浏览器在javascript的加载方式)
May 20 Javascript
JS中判断字符串中出现次数最多的字符及出现的次数的简单实例
Jun 03 Javascript
JavaScript判断数组重复内容的两种方法(推荐)
Jun 06 Javascript
js判断是否是手机页面
Mar 17 Javascript
浅谈JavaScript的innerWidth与innerHeight
Oct 12 Javascript
详解小程序缓存插件(mrc)
Aug 17 Javascript
深入理解react-router 路由的实现原理
Sep 26 Javascript
详解ES6 Promise对象then方法链式调用
Oct 20 Javascript
highCharts提示框中显示当前时间的方法
Jan 18 Javascript
Vue + Element UI图片上传控件使用详解
Aug 20 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
漫威DC即将合作联动,而双方早已经秘密开始
2020/04/09 欧美动漫
在VS2008中编译MYSQL5.1.48的方法
2010/07/03 PHP
PHP实现二叉树的深度优先与广度优先遍历方法
2015/09/28 PHP
jQuery 1.3 和 Validation 验证插件1.5.1
2009/07/09 Javascript
通过javascript的匿名函数来分析几段简单有趣的代码
2010/06/29 Javascript
浅析JavaScript基本类型与引用类型
2014/05/28 Javascript
简介JavaScript中的setTime()方法的使用
2015/06/11 Javascript
有关easyui-layout中的收缩层无法显示标题的解决办法
2016/05/10 Javascript
AngularJS 遇到的小坑与技巧小结
2016/06/07 Javascript
一个简单不报错的summernote 图片上传案例
2016/07/11 Javascript
微信小程序 rpx 尺寸单位详细介绍
2016/10/13 Javascript
Javascript中for循环语句的几种写法总结对比
2017/01/23 Javascript
Vue.js render方法使用详解
2017/04/05 Javascript
JS Object.preventExtensions(),Object.seal()与Object.freeze()用法实例分析
2018/08/25 Javascript
jQuery常见的遍历DOM操作详解
2018/09/05 jQuery
Vue + Elementui实现多标签页共存的方法
2019/06/12 Javascript
vue实现手机端省市区区域选择
2019/09/27 Javascript
VUE 动态组件的应用案例分析
2019/12/02 Javascript
解决Vue 刷新页面导航显示高亮位置不对问题
2019/12/25 Javascript
解决vue-photo-preview 异步图片放大失效的问题
2020/07/29 Javascript
Swiper实现导航栏滚动效果
2020/10/16 Javascript
Python pass 语句使用示例
2014/03/11 Python
Python Scapy随心所欲研究TCP协议栈
2018/11/20 Python
django表单的Widgets使用详解
2019/07/22 Python
pyqt5中动画的使用详解
2020/04/01 Python
使用jupyter notebook直接打开.md格式的文件
2020/04/10 Python
python 实现两个npy档案合并
2020/07/01 Python
亿企通软件测试面试题
2012/04/10 面试题
责任担保书范文
2014/05/21 职场文书
2014年党建工作汇报材料
2014/11/02 职场文书
入党积极分子党支部意见
2015/06/02 职场文书
运动会闭幕式致辞
2015/07/29 职场文书
严以用权专题学习研讨会发言材料
2015/11/09 职场文书
七年级作文之关于奶奶
2019/10/29 职场文书
JS如何使用剪贴板操作Clipboard API
2021/05/17 Javascript
Vue3实现简易音乐播放器组件
2022/08/14 Vue.js