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 相关文章推荐
js 判断 enter 事件
Feb 12 Javascript
EXT窗口Window及对话框MessageBox
Jan 27 Javascript
JavaScript之编码规范 推荐
May 23 Javascript
javascript中this做事件参数相关问题解答
Mar 17 Javascript
IE与FF下javascript获取网页及窗口大小的区别详解
Jan 14 Javascript
jQuery插件formValidator自定义函数扩展功能实例详解
Nov 25 Javascript
JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】
Aug 23 Javascript
JS基于对象的特性实现去除数组中重复项功能详解
Nov 17 Javascript
详解Angular路由之路由守卫
May 10 Javascript
jQuery分组选择器简单用法示例
Apr 04 jQuery
Node爬取大批量文件的方法示例
Jun 28 Javascript
ES6 新增的创建数组的方法(小结)
Aug 01 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学习笔记之 函数声明(二)
2011/06/09 PHP
浏览器关闭后,能继续执行的php函数(ignore_user_abort)
2012/08/01 PHP
PHP中使用xmlreader读取xml数据示例
2014/12/29 PHP
javascript 触发HTML元素绑定的函数
2010/09/11 Javascript
JAVASCRIPT函数作用域和提前声明 分享
2013/08/22 Javascript
node.js中的console.time方法使用说明
2014/12/09 Javascript
JavaScript基础函数整理汇总
2015/01/30 Javascript
javascript基础知识讲解
2017/01/11 Javascript
javascript 玩转Date对象(实例讲解)
2017/07/11 Javascript
jQuery实现切换隐藏与显示同时切换图标功能
2017/10/29 jQuery
基于jquery trigger函数无法触发a标签的两种解决方法
2018/01/06 jQuery
[15:15]教你分分钟做大人:狙击手
2014/10/30 DOTA
如何搜索查找并解决Django相关的问题
2014/06/30 Python
Python入门篇之编程习惯与特点
2014/10/17 Python
python统计一个文本中重复行数的方法
2014/11/19 Python
浅谈Python 集合(set)类型的操作——并交差
2016/06/30 Python
详解Python开发中如何使用Hook技巧
2017/11/01 Python
名片管理系统python版
2018/01/11 Python
Python实现爬取马云的微博功能示例
2019/02/16 Python
解决在keras中使用model.save()函数保存模型失败的问题
2020/05/21 Python
python 实现一个简单的线性回归案例
2020/12/17 Python
python网络爬虫实现发送短信验证码的方法
2021/02/25 Python
香港交友网站:be2香港
2018/07/22 全球购物
Speedo速比涛德国官方网站:世界领先的泳装品牌
2019/08/26 全球购物
酒店大堂副理的职责范文
2014/02/13 职场文书
初一学生评语大全
2014/04/24 职场文书
园艺师求职信
2014/04/27 职场文书
企业公益活动策划方案
2014/08/24 职场文书
离职证明标准格式
2014/09/15 职场文书
乡镇镇长个人整改措施
2014/10/01 职场文书
2014年实验室工作总结
2014/12/03 职场文书
优秀大学生事迹材料
2014/12/24 职场文书
2015年保险公司内勤工作总结
2015/05/23 职场文书
教务处干事工作总结
2015/08/14 职场文书
nginx配置虚拟主机的详细步骤
2021/07/21 Servers
python 中的jieba分词库
2021/11/23 Python