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代码格式化和语法着色V2
Oct 14 Javascript
很可爱的输入框
Aug 03 Javascript
JavaScript 高效运行代码分析
Mar 18 Javascript
javascript日期转换 时间戳转日期格式
Nov 05 Javascript
javascript 进阶篇3 Ajax 、JSON、 Prototype介绍
Mar 14 Javascript
js中符号转意问题示例探讨
Aug 19 Javascript
JavaScript中的Math.SQRT1_2属性使用简介
Jun 14 Javascript
BootStrap 智能表单实战系列(五) 表单依赖插件处理
Jun 13 Javascript
JavaScript中严格判断NaN的方法
Feb 16 Javascript
vue 监听某个div垂直滚动条下拉到底部的方法
Sep 15 Javascript
初试vue-cli使用HBuilderx打包app的坑
Jul 17 Javascript
解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题
Jul 21 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 对输入信息的进行安全过滤的函数代码
2012/06/29 PHP
PHP常用开发函数解析之数组篇[未完结]
2012/07/30 PHP
thinkphp常见路径用法分析
2014/12/02 PHP
php采集自中央气象台范围覆盖全国的天气预报代码实例
2015/01/04 PHP
PHP构造二叉树算法示例
2017/06/21 PHP
PHP开发之用微信远程遥控服务器
2018/01/25 PHP
jquery 取子节点及当前节点属性值的方法
2014/08/24 Javascript
jQuery插件zepto.js简单实现tab切换
2015/06/16 Javascript
jQuery实现的类似淘宝网站搜索框样式代码分享
2015/08/24 Javascript
JavaScript+CSS无限极分类效果完整实现方法
2015/12/22 Javascript
JavaScript函数内部属性和函数方法实例详解
2016/03/17 Javascript
React + webpack 环境配置的方法步骤
2017/09/07 Javascript
JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解
2017/09/19 Javascript
bootstrap可编辑下拉框jquery.editable-select
2017/10/12 jQuery
20多个小事例带你重温ES10新特性(小结)
2019/09/29 Javascript
JS实现电商商品展示放大镜特效
2020/01/07 Javascript
[07:09]2014DOTA2国际邀请赛-Newbee再次发威成功晋级决赛
2014/07/19 DOTA
Django的session中对于用户验证的支持
2015/07/23 Python
Python首次安装后运行报错(0xc000007b)的解决方法
2016/10/18 Python
Python中input与raw_input 之间的比较
2017/08/20 Python
Python使用numpy模块创建数组操作示例
2018/06/20 Python
如何利用python给图片添加半透明水印
2019/09/06 Python
python自动生成model文件过程详解
2019/11/02 Python
Pytorch使用MNIST数据集实现基础GAN和DCGAN详解
2020/01/10 Python
CSS3控制HTML元素动画效果
2014/02/08 HTML / CSS
标记环介质访问控制协议
2016/03/27 面试题
升职自荐书范文
2013/11/28 职场文书
退休教师欢送会主持词
2014/03/31 职场文书
中医学专业自荐信范文
2014/04/01 职场文书
工程售后服务方案
2014/06/08 职场文书
工地质量标语
2014/06/12 职场文书
党支部书记四风问题整改措施
2014/09/24 职场文书
教师三严三实对照检查材料
2014/09/25 职场文书
2014年党风廉政工作总结
2014/12/03 职场文书
戒赌保证书
2015/05/11 职场文书
《猴王出世》教学反思
2016/02/23 职场文书