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 面向对象封装与继承
Nov 27 Javascript
《JavaScript函数式编程》读后感
Aug 07 Javascript
Angularjs注入拦截器实现Loading效果
Dec 28 Javascript
jquery对象和DOM对象的任意相互转换
Feb 21 Javascript
js实现文字滚动效果
Mar 03 Javascript
JavaScript中的原型prototype完全解析
May 10 Javascript
BootStrap下jQuery自动完成的样式调整
May 30 Javascript
Javascript在IE和Firefox浏览器常见兼容性问题总结
Aug 03 Javascript
jQuery Dialog 打开时自动聚焦的解决方法(两种方法)
Nov 24 Javascript
BootStrap Datepicker 插件修改为默认中文的实现方法
Feb 10 Javascript
node.js实现为PDF添加水印的示例代码
Dec 05 Javascript
JS实现刷新网页后之前浏览位置保持不变示例详解
Aug 14 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实现的Timer页面运行时间监测类
2014/09/24 PHP
PHP的PDO连接讲解
2019/01/24 PHP
javascript 鼠标拖动图标技术
2010/02/07 Javascript
网易JS面试题与Javascript词法作用域说明
2010/11/09 Javascript
jquery中ajax调用json数据的使用说明
2011/03/17 Javascript
JS制作简单的三级联动
2015/03/18 Javascript
javascript实现简单的二级联动
2015/03/19 Javascript
node.js读取文件到字符串的方法
2015/06/29 Javascript
BooStrap对导航条的改造实践小结
2016/09/21 Javascript
jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例
2017/02/14 Javascript
浅谈node中的exports与module.exports的关系
2017/08/01 Javascript
vue项目webpack中Npm传递参数配置不同域名接口
2018/06/15 Javascript
AngularJs返回前一页面时刷新一次前面页面的方法
2018/10/09 Javascript
MockJs结合json-server模拟后台数据
2020/08/26 Javascript
JS document form表单元素操作完整示例
2020/01/13 Javascript
vue-cli或vue项目利用HBuilder打包成移动端app操作
2020/07/29 Javascript
IDEA配置jQuery, $符号不再显示黄色波浪线的问题
2020/10/09 jQuery
Python比较两个图片相似度的方法
2015/03/13 Python
Django使用Celery异步任务队列的使用
2018/03/13 Python
python将每个单词按空格分开并保存到文件中
2018/03/19 Python
elasticsearch python 查询的两种方法
2019/08/04 Python
django 数据库连接模块解析及简单长连接改造方法
2019/08/29 Python
全网最全python库selenium自动化使用详细教程
2021/01/12 Python
纯CSS3实现给头像加个光芒四射且旋转的背景动画效果
2014/05/07 HTML / CSS
泰国排名第一的家居用品中心:HomePro
2020/11/18 全球购物
类如何去实现接口
2013/12/19 面试题
short s1 = 1; s1 = s1 + 1;有什么错? short s1 = 1; s1 += 1;有什么错?
2014/09/26 面试题
工厂保洁员岗位职责
2013/12/04 职场文书
项目副经理岗位职责
2013/12/30 职场文书
酒店前厅员工辞职信
2014/01/08 职场文书
保险公司年会主持词
2014/03/22 职场文书
导航工程专业自荐信
2014/09/02 职场文书
求职自荐信怎么写
2015/03/04 职场文书
房地产公司工程部经理岗位职责
2015/04/09 职场文书
python爬虫之爬取笔趣阁小说
2021/04/22 Python
OpenCV绘制圆端矩形的示例代码
2021/08/30 Python