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全排列的六种算法 具体实现
Jun 29 Javascript
JQuery分别取得每行最后一列和最后一行的示例代码
Aug 18 Javascript
jQuery操作Table技巧大汇总
Jan 23 Javascript
JS中使用DOM来控制HTML元素
Jul 31 Javascript
URL中“#” “?” &amp;“”号的作用浅析
Feb 04 Javascript
纯js三维数组实现三级联动效果
Feb 07 Javascript
vue页面使用阿里oss上传功能的实例(一)
Aug 09 Javascript
AngularJS表单验证功能
Oct 19 Javascript
JavaScript框架Angular和React深度对比
Nov 20 Javascript
浅谈React + Webpack 构建打包优化
Jan 23 Javascript
js console.log打印对象时属性缺失的解决方法
May 23 Javascript
使用vue自定义指令开发表单验证插件validate.js
May 23 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
BBS(php &amp; mysql)完整版(二)
2006/10/09 PHP
小偷PHP+Html+缓存
2006/11/25 PHP
关于php fread()使用技巧
2010/01/22 PHP
PHP Memcached应用实现代码
2010/02/08 PHP
基于递归实现的php树形菜单代码
2014/11/19 PHP
php检测mysql表是否存在的方法小结
2017/07/20 PHP
jquery 仿QQ校友的DIV模拟窗口效果源码
2010/03/24 Javascript
用js实现输入提示(自动完成)的实例代码
2013/06/14 Javascript
js实现按一下删除键删除整个单词附demo
2014/09/05 Javascript
node爬取微博的数据的简单封装库nodeweibo使用指南
2015/01/02 Javascript
使用jQuery实现返回顶部
2015/01/26 Javascript
分享两个手机访问pc网站自动跳转手机端网站代码
2020/12/24 Javascript
javascript截图 jQuery插件imgAreaSelect使用详解
2016/05/04 Javascript
jquery通过name属性取值的简单实现方法
2016/06/20 Javascript
简单实现js选项卡切换效果
2017/02/09 Javascript
BootStrap Datepicker 插件修改为默认中文的实现方法
2017/02/10 Javascript
jQuery实现字体颜色渐变效果的方法
2017/03/29 jQuery
ionic3+Angular4实现接口请求及本地json文件读取示例
2017/10/11 Javascript
bootstrap可编辑下拉框jquery.editable-select
2017/10/12 jQuery
详解vue-router导航守卫
2019/01/19 Javascript
VUEX采坑之路之获取不到$store的解决方法
2019/11/08 Javascript
[38:41]2014 DOTA2国际邀请赛中国区预选赛 LGD VS CNB
2014/05/22 DOTA
[01:07:02]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第三场 2月26日
2021/03/11 DOTA
Python实现的一个简单LRU cache
2014/09/26 Python
python如何实现int函数的方法示例
2018/02/19 Python
python绘制简单彩虹图
2018/11/19 Python
python os.fork() 循环输出方法
2019/08/08 Python
Python 网络编程之UDP发送接收数据功能示例【基于socket套接字】
2019/10/11 Python
详解PyQt5中textBrowser显示print语句输出的简单方法
2020/08/07 Python
Python爬虫入门教程02之笔趣阁小说爬取
2021/01/24 Python
CSS3实现复选框动画特效示例代码
2016/09/27 HTML / CSS
新闻编辑专业自荐信
2014/07/02 职场文书
个人投资合作协议书
2014/10/12 职场文书
公积金接收函格式
2015/01/30 职场文书
详解redis分布式锁的这些坑
2021/05/19 Redis
详解Android中的TimePickerView(时间选择器)的用法
2022/04/30 Java/Android