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的左右滚动实现代码
Dec 03 Javascript
jquery 动态创建元素的方式介绍及应用
Apr 21 Javascript
Javascript中克隆一个数组的实现代码
Dec 06 Javascript
js实现的点击数量加一可操作数据库
May 09 Javascript
javascript实现的淘宝旅行通用日历组件用法实例
Aug 03 Javascript
jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果
Aug 25 Javascript
jQuery学习笔记之Ajax用法实例详解
Dec 01 Javascript
javascript中setAttribute兼容性用法分析
Dec 12 Javascript
微信小程序开发之animation循环动画实现的让云朵飘效果
Jul 14 Javascript
详解如何用模块化的方式写vuejs
Dec 16 Javascript
使用vue for时为什么要key【推荐】
Jul 11 Javascript
vue实现图书管理系统
Dec 29 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
第十五节--Zend引擎的发展
2006/11/16 PHP
PHP 实例化类的一点摘记
2008/03/23 PHP
php XPath对XML文件查找及修改实现代码
2011/07/27 PHP
PHP垃圾回收机制引用计数器概念分析
2013/06/24 PHP
Yii控制器中操作视图js的方法
2016/07/04 PHP
php阳历转农历优化版
2016/08/08 PHP
laravel邮件发送的实现代码示例
2020/01/31 PHP
JS中常用的正则表达式
2016/09/29 Javascript
初识NodeJS服务端开发入门(Express+MySQL)
2017/04/07 NodeJs
vue.js移动数组位置,同时更新视图的方法
2018/03/08 Javascript
js取0-9随机取4个数不重复的数字代码实例
2019/03/27 Javascript
微信小程序常用的3种提示弹窗实现详解
2019/09/19 Javascript
微信小程序用户拒绝授权的处理方法详解
2019/09/20 Javascript
基于JS实现简单滑块拼图游戏
2019/10/12 Javascript
JSON stringify方法原理及实例解析
2020/10/23 Javascript
[01:28:24]NAVI vs VG Supermajor 败者组 BO3 第三场 6.5
2018/06/06 DOTA
用Python实现一个简单的线程池
2015/04/07 Python
Python遍历目录并批量更换文件名和目录名的方法
2016/09/19 Python
Python编程之Re模块下的函数介绍
2017/10/28 Python
有关Python的22个编程技巧
2018/08/29 Python
使用python实现快速搭建简易的FTP服务器
2018/09/12 Python
手把手教你使用Python创建微信机器人
2019/04/29 Python
使用python去除图片白色像素的实例
2019/12/12 Python
Python输出指定字符串的方法
2020/02/06 Python
Django项目uwsgi+Nginx保姆级部署教程实现
2020/04/19 Python
python 调用Google翻译接口的方法
2020/12/09 Python
亚马逊印度站:Amazon.in
2017/10/15 全球购物
美国网上书店:Barnes & Noble
2018/08/15 全球购物
建筑经济管理专业求职信分享
2014/01/06 职场文书
专科应届毕业生求职信
2014/06/04 职场文书
八项规定对照检查材料
2014/08/31 职场文书
环境卫生工作汇报材料
2014/10/28 职场文书
浅析Python实现DFA算法
2021/06/26 Python
室外天线与收音机天线杆接合方法
2022/04/05 无线电
vue组件冲突之引用另一个组件出现组件不显示的问题
2022/04/13 Vue.js
MySQL数据库之存储过程 procedure
2022/06/16 MySQL