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 相关文章推荐
JavaScript聚焦于第一个字段的代码
Oct 15 Javascript
js异常捕获方法介绍
Apr 10 Javascript
理解javascript中DOM事件
Dec 25 Javascript
jquery validate表单验证插件
Sep 06 Javascript
基于jQuery实现Accordion手风琴自定义插件
Oct 13 Javascript
微信小程序 Nginx环境配置详细介绍
Feb 14 Javascript
Vue2.0实现将页面中表格数据导出excel的实例
Aug 09 Javascript
基于jQuery的左滑出现删除按钮的示例
Aug 29 jQuery
关于Vue组件库开发详析
Jul 01 Javascript
详解vue-router数据加载与缓存使用总结
Oct 29 Javascript
vue 解决data中定义图片相对路径页面不显示的问题
Aug 13 Javascript
在vant 中使用cell组件 定义图标该图片和位置操作
Nov 02 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
Windows下php+mysql5.7配置教程
2017/05/16 PHP
PHP实现腾讯与百度坐标转换
2017/08/05 PHP
PHP实现的AES 128位加密算法示例
2019/09/16 PHP
用javascript获取地址栏参数
2006/12/22 Javascript
javascript网页关键字高亮代码
2008/07/30 Javascript
javascript 写类方式之三
2009/07/05 Javascript
jquery处理json数据实例分析
2014/06/03 Javascript
js支持键盘控制的左右切换立体式图片轮播效果代码分享
2015/08/26 Javascript
jQuery中on绑定事件后引发的事件冒泡问题如何解决
2016/05/25 Javascript
javascript 分号总结及详细介绍
2016/09/24 Javascript
Bootstrap路径导航与分页学习使用
2017/02/08 Javascript
jquery dataTable 获取某行数据
2017/05/05 jQuery
validationEngine 表单验证插件使用实例代码
2017/06/15 Javascript
微信JSAPI Ticket接口签名详解
2020/06/28 Javascript
在Vue中使用axios请求拦截的实现方法
2018/10/25 Javascript
详解bootstrap-fileinput文件上传控件的亲身实践
2019/03/21 Javascript
vue中使用rem布局代码详解
2019/10/30 Javascript
[01:25]DOTA2超级联赛专访iG 将调整状态找回自己
2013/06/05 DOTA
python的类变量和成员变量用法实例教程
2014/08/25 Python
分享python数据统计的一些小技巧
2016/07/21 Python
Python 中的Selenium异常处理实例代码
2018/05/03 Python
python自动化unittest yaml使用过程解析
2020/02/03 Python
CSS3中几个新增加的盒模型属性使用教程
2016/03/01 HTML / CSS
HTML5实现预览本地图片
2016/02/17 HTML / CSS
法国足球商店:Footcenter
2019/07/06 全球购物
美国亚马逊旗下男装网站:East Dane(支持中文)
2019/09/25 全球购物
销售文员的岗位职责
2013/11/20 职场文书
太太口服液广告词
2014/03/20 职场文书
慈善捐赠倡议书
2014/08/30 职场文书
求职自我评价范文100字
2014/09/23 职场文书
小学教师节活动总结
2015/03/20 职场文书
Canvas三种动态画圆实现方法说明(小结)
2021/04/16 Javascript
Linux中Nginx的防盗链和优化的实现代码
2021/06/20 Servers
详解TypeScript的基础类型
2022/02/18 Javascript
使用Bandicam录制鼠标指针并附带点击声音,还可以添加点击动画效果
2022/04/11 数码科技
人工智能深度学习OpenAI baselines的使用方法
2022/05/20 Python