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 相关文章推荐
判断客户端浏览器是否安装了Flash插件的多种方法
Aug 11 Javascript
基于jQuery实现放大镜特效
Oct 19 Javascript
动态的9*9乘法表效果的实现代码
May 16 Javascript
AngularJS在IE下取数据总是缓存问题的解决方法
Aug 05 Javascript
KnockoutJS 3.X API 第四章之数据控制流if绑定和ifnot绑定
Oct 10 Javascript
react.js 获取真实的DOM节点实例(必看)
Apr 17 Javascript
Angular2.0/4.0 使用Echarts图表的示例代码
Dec 07 Javascript
Vue集成Iframe页面的方法示例
Dec 12 Javascript
vue2.0 computed 计算list循环后累加值的实例
Mar 07 Javascript
vue实现与安卓、IOS交互的方法
Nov 02 Javascript
javascript面向对象三大特征之继承实例详解
Jul 24 Javascript
解决layer弹出层的内容页点击按钮跳转到新的页面问题
Sep 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 转换字符串编码 iconv与mb_convert_encoding的区别说明
2011/11/10 PHP
PHP模块memcached使用指南
2014/12/08 PHP
php根据某字段对多维数组进行排序的方法
2015/03/07 PHP
PHP连接MySQL数据的操作要点
2015/03/20 PHP
Apache服务器下防止图片盗链的办法
2015/07/06 PHP
composer.lock文件的作用
2016/02/03 PHP
PHP进程通信基础之信号量与共享内存通信
2017/02/19 PHP
thinkPHP实现签到功能的方法
2017/03/15 PHP
php设计模式之中介者模式分析【星际争霸游戏案例】
2020/03/23 PHP
JS实现在Repeater控件中创建可隐藏区域的代码
2010/09/16 Javascript
js String对象中常用方法小结(字符串操作)
2012/01/27 Javascript
可自己添加html的伪弹出框实现代码
2013/09/08 Javascript
JavaScript利用正则表达式去除日期中的-
2014/06/09 Javascript
jquery操作 iframe的方法
2014/12/03 Javascript
javascript实现动态导入js与css等静态资源文件的方法
2015/07/25 Javascript
jQuery动态添加可拖动元素完整实例(附demo源码下载)
2016/06/21 Javascript
js移动焦点到最后位置的简单方法
2016/11/25 Javascript
Vue2.0 UI框架ElementUI使用方法详解
2017/04/14 Javascript
解决Vue编译时写在style中的路径问题
2017/09/21 Javascript
JavaScript中错误正确处理方式小结你用对了吗
2017/10/10 Javascript
jQuery响应滚动条事件功能示例
2017/10/14 jQuery
vue使用高德地图根据坐标定位点的实现代码
2019/08/22 Javascript
[35:44]2014 DOTA2华西杯精英邀请赛 5 24 iG VS VG
2014/05/26 DOTA
Python操作Access数据库基本步骤分析
2016/09/19 Python
分享Pycharm中一些不为人知的技巧
2018/04/03 Python
Python网页正文转换语音文件的操作方法
2018/12/09 Python
python实现控制台打印的方法
2019/01/12 Python
python实现狄克斯特拉算法
2019/01/17 Python
Python函数参数匹配模型通用规则keyword-only参数详解
2019/06/10 Python
梵蒂冈和罗马卡:Omnia Card Pass
2018/02/10 全球购物
MATCHESFASHION澳大利亚/亚太地区:英国时尚奢侈品电商
2020/01/14 全球购物
金蝶的一道SQL笔试题
2012/12/18 面试题
干货干货!2019最新优秀创业计划书
2019/03/21 职场文书
MySQL完整性约束的定义与实例教程
2021/05/30 MySQL
Python中如何处理常见报错
2022/01/18 Python
Vue3中toRef与toRefs的区别
2022/03/24 Vue.js