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 相关文章推荐
图片在浏览器中底部对齐 解决方法之一
Nov 30 Javascript
js简单实现删除记录时的提示效果
Dec 05 Javascript
javascript比较两个日期的先后示例代码
Dec 31 Javascript
Javascript 正则表达式实现为数字添加千位分隔符
Mar 10 Javascript
浅谈Javascript中Object与Function对象
Sep 26 Javascript
vue-dialog的弹出层组件
May 25 Javascript
VUE axios发送跨域请求需要注意的问题
Jul 06 Javascript
jQuery.Sumoselect插件实现下拉复选框效果
Nov 09 jQuery
详解JS数值Number类型
Feb 07 Javascript
详解在React-Native中持久化redux数据
May 22 Javascript
vue项目打包后请求地址错误/打包后跨域操作
Nov 04 Javascript
Vue如何实现验证码输入交互
Dec 07 Vue.js
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获取毫秒级时间戳的方法
2015/04/15 PHP
Nginx服务器上安装并配置PHPMyAdmin的教程
2015/08/18 PHP
合格的PHP程序员必备技能
2015/11/13 PHP
Yii隐藏URL中index.php的方法
2016/07/12 PHP
thinkPHP5实现的查询数据库并返回json数据实例
2017/10/23 PHP
Ubuntu上安装yaf扩展的方法
2018/01/29 PHP
用Javascript同时提交多个Web表单的方法
2009/12/26 Javascript
jQuery 自动增长的文本输入框实现代码
2010/04/02 Javascript
JS对HTML标签select的获取、添加、删除操作
2013/10/17 Javascript
jquery模拟SELECT下拉框取值效果
2013/10/23 Javascript
用JS生成UUID的方法实例
2016/03/30 Javascript
vue实现tab切换外加样式切换方法
2018/03/16 Javascript
vue实现菜单切换功能
2019/05/08 Javascript
Vue-cli3生成的Vue项目加载Mxgraph方法示例
2020/05/31 Javascript
[02:11]2016国际邀请赛中国区预选赛全程回顾
2016/07/01 DOTA
Python中操作文件之write()方法的使用教程
2015/05/25 Python
python检查URL是否正常访问的小技巧
2017/02/25 Python
python使用筛选法计算小于给定数字的所有素数
2018/03/19 Python
python实现连续图文识别
2018/12/18 Python
Python把对应格式的csv文件转换成字典类型存储脚本的方法
2019/02/12 Python
itchat-python搭建微信机器人(附示例)
2019/06/11 Python
将python运行结果保存至本地文件中的示例讲解
2019/07/11 Python
django之状态保持-使用redis存储session的例子
2019/07/28 Python
在django中使用apscheduler 执行计划任务的实现方法
2020/02/11 Python
Python实现验证码识别
2020/06/15 Python
Python 数据的累加与统计的示例代码
2020/08/03 Python
python3 re返回形式总结
2020/11/20 Python
python实现控制台输出颜色
2021/03/02 Python
美国汽车性能部件和赛车零件网站:Vivid Racing
2018/03/27 全球购物
美国购买新书和二手书网站:Better World Books
2018/10/31 全球购物
铭立家具面试题
2012/12/06 面试题
开学典礼致辞
2015/07/29 职场文书
敬业奉献模范事迹材料(2016精选版)
2016/02/26 职场文书
如何利用map实现Nginx允许多个域名跨域
2021/03/31 Servers
redis内存空间效率问题的深入探究
2021/05/17 Redis
Django migrate报错的解决方案
2021/05/20 Python