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 相关文章推荐
JQuery 操作Javascript对象和数组的工具函数小结
Jan 22 Javascript
Three.js源码阅读笔记(物体是如何组织的)
Dec 27 Javascript
浅析JavaScript中的类型和对象
Nov 29 Javascript
node.js操作mysql(增删改查)
Jul 24 Javascript
jquery实现文字单行横移或翻转(上下、左右跳转)
Jan 08 Javascript
js实现图片旋转 js滚动鼠标中间对图片放大缩小
Jul 05 Javascript
基于JS脚本语言的基础语法详解
Jul 22 Javascript
微信小程序实战篇之购物车的实现代码示例
Nov 30 Javascript
基于 Immutable.js 实现撤销重做功能的实例代码
Mar 01 Javascript
jQuery实现的卷帘门滑入滑出效果【案例】
Feb 18 jQuery
JavaScript进阶(一)变量声明提升实例分析
May 09 Javascript
JavaScript的Set数据结构详解
Feb 18 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实现简单洗牌算法
2013/06/18 PHP
PHP常用处理静态操作类
2015/04/03 PHP
php+ajax无刷新上传图片实例代码
2015/11/17 PHP
在CentOS系统上从零开始搭建WordPress博客的全流程记录
2016/04/21 PHP
Yii2超好用的日期和时间组件(值得收藏)
2016/05/05 PHP
php自定义函数实现二维数组按指定key排序的方法
2016/09/29 PHP
PHP面向对象程序设计组合模式与装饰模式详解
2016/12/02 PHP
PHP二维数组去重算法
2016/12/17 PHP
php实现自定义中奖项数和概率的抽奖函数示例
2017/05/26 PHP
PHP自定义函数实现数组比较功能示例
2017/10/19 PHP
PHP date()格式MySQL中插入datetime方法
2019/01/29 PHP
Mootools 1.2 手风琴(Accordion)教程
2009/09/15 Javascript
javascript或asp实现的判断身份证号码是否正确两种验证方法
2009/11/26 Javascript
由点击页面其它地方隐藏div所想到的jQuery的delegate
2013/08/29 Javascript
JavaScript实现url地址自动检测并添加URL链接示例代码
2013/11/12 Javascript
JS删除字符串中重复字符方法
2014/03/09 Javascript
EasyUI中实现form表单提交的示例分享
2015/03/01 Javascript
JavaScript jquery及AJAX小结
2016/01/24 Javascript
ES6正则表达式的一些新功能总结
2017/05/09 Javascript
深入理解Vue生命周期、手动挂载及挂载子组件
2017/09/27 Javascript
详解vue项目打包后通过百度的BAE发布到网上的流程
2018/03/05 Javascript
浅谈JavaScript 代码整洁之道
2018/10/23 Javascript
vue使用一些外部插件及样式的配置代码
2019/11/18 Javascript
JS实现动态无缝轮播
2020/01/11 Javascript
Python中的类学习笔记
2014/09/23 Python
python中redis查看剩余过期时间及用正则通配符批量删除key的方法
2018/07/30 Python
python是怎么被发明的
2020/06/15 Python
DRF使用simple JWT身份验证的实现
2021/01/14 Python
苏格兰在线威士忌商店:The Whisky Barrel
2019/05/07 全球购物
AutoShack.com加拿大:北美主要的汽车零部件零售商
2019/07/24 全球购物
英国网上电器商店:Electricshop
2020/03/15 全球购物
致跳远运动员加油稿
2014/02/11 职场文书
中学生寄语大全
2014/04/03 职场文书
党员个人公开承诺书
2014/08/29 职场文书
详解python中[-1]、[:-1]、[::-1]、[n::-1]使用方法
2021/04/25 Python
JavaScript执行机制详细介绍
2021/12/06 Javascript