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 03 Javascript
javascript新建标签,判断键盘输入,以及判断焦点(示例代码)
Nov 25 Javascript
js复制网页内容并兼容各主流浏览器的代码
Dec 17 Javascript
Node.js和PHP根据ip获取地理位置的方法
Mar 14 Javascript
超级简单的jquery操作表格方法
Dec 15 Javascript
分析了一下JQuery中的extend方法实现原理
Feb 27 Javascript
js实现网页多级级联菜单代码
Aug 20 Javascript
jquery实现左右滑动菜单效果代码
Aug 27 Javascript
jQuery操作Table技巧大汇总
Jan 23 Javascript
vue项目中的webpack-dev-sever配置方法
Dec 14 Javascript
JS实现百度搜索接口及链接功能实例代码
Feb 02 Javascript
详解vue 兼容IE报错解决方案
Dec 29 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 字符截取 解决中文的截取问题,不用mb系列
2009/09/29 PHP
php判断输入不超过mysql的varchar字段的长度范围
2011/06/24 PHP
JpGraph php柱状图使用介绍
2011/08/23 PHP
PHP获取用户的浏览器与操作系统信息的代码
2012/09/04 PHP
解析CodeIgniter自定义配置文件
2013/06/18 PHP
php计算指定目录下文件占用空间的方法
2015/03/13 PHP
CI框架表单验证实例详解
2016/11/21 PHP
PHP十六进制颜色随机生成器功能示例
2017/07/24 PHP
jQuery 动态酷效果实现总结
2009/12/27 Javascript
onsubmit阻止form表单提交与onclick的相关操作
2010/09/03 Javascript
在JavaScript中操作时间之getMonth()方法的使用
2015/06/10 Javascript
jQuery unbind()方法实例详解
2016/01/19 Javascript
JavaScript中的时间处理小结
2016/02/24 Javascript
Angularjs 滚动加载更多数据
2016/03/17 Javascript
学习AngularJs:Directive指令用法(完整版)
2016/04/26 Javascript
AngularJS 服务详细讲解及示例代码
2016/08/17 Javascript
Javascript中indexOf()和lastIndexOf应用方法实例
2016/08/24 Javascript
JS实现焦点图轮播效果的方法详解
2016/12/19 Javascript
laydate.js日期时间选择插件
2017/01/04 Javascript
Vue.js结合Ueditor富文本编辑器的实例代码
2017/07/11 Javascript
关于Vue在ie10下空白页的debug小结
2018/05/02 Javascript
Angular6中使用Swiper的方法示例
2018/07/09 Javascript
react build 后打包发布总结
2018/08/24 Javascript
webpack4.0+vue2.0利用批处理生成前端单页或多页应用的方法
2019/06/28 Javascript
VTK与Python实现机械臂三维模型可视化详解
2017/12/13 Python
python 随机打乱 图片和对应的标签方法
2018/12/14 Python
python数据归一化及三种方法详解
2019/08/06 Python
简单分析python的类变量、实例变量
2019/08/23 Python
tensorflow指定GPU与动态分配GPU memory设置
2020/02/03 Python
CSS3选择器新增问题的实现
2021/01/21 HTML / CSS
Famous Footwear加拿大:美国多品牌运动休闲鞋店
2018/12/05 全球购物
英国领先的在线鱼贩:The Fish Society
2020/08/12 全球购物
国际经济贸易专业推荐信
2013/11/06 职场文书
上班看电影检讨书
2014/02/12 职场文书
个人四风问题原因分析及整改措施
2014/09/28 职场文书
2014年酒店年度工作总结
2014/12/10 职场文书