多个iframe自动调整大小的问题


Posted in Javascript onSeptember 18, 2006

一个页面我有多个iframe,且每个iframe的src都不一样,高度也不一样。
怎样用一个函数,自动调整这个页面里所有iframe的高度呢?

function change_size(iframe)
{
    iframe.style.height=info_content.document.body.scrollHeight+1+"px";
}
我用过这种方式,但是等号后面的第一个对象不知道应该怎样动态显示。
比如:
function change_size(no)
{
                var el_name = "iframe"+no;
                el = document.getElementById(el_name);
    el .style.height=el.document.body.scrollHeight+1+"px";
                //举例,实际不能调整高度,因为后面的el不能指向正确的对象
}

所以我现在暂时用了这种方式,对应每个iframe用一次 
a.style.height = iframe_a.document.body.scrollHeight
b.style.height = iframe_b.document.body.scrollHeight

希望您能给一个更为简单的方法,我解除js没多久,可能问题有点愚蠢,请见谅。
感觉上你这样写的自动调整 会出问题.
如果父页面加载完了,而子页面没有加载完,你控制的iframe高度肯定不会是 你所想的高度.

如果你的子页面和父页面同在一个域名下给你推荐一种简单办法.

在父页面中设置一个函数用来 调整某一个ifame的高度,然后在子页面的body onload中调用父页面的这个函数.这样肯定是 等子页面加载完了 在设置的高度,这样可设置成子页面的实际高度.

//父页面的设置高度代码,未测试

function setParentFrameHeight(frameid,height){ 
    var frame= document.getElementById(frameid); 
    frame.style.height = height;//实际的height可以可以在子页面的body里获得 
}
Javascript 相关文章推荐
一个可以显示阴历的JS代码
Mar 05 Javascript
对YUI扩展的Gird组件 Part-2
Mar 10 Javascript
用tip解决Ext列宽度不够的问题
Dec 13 Javascript
javascript学习笔记(六) Date 日期类型
Jun 19 Javascript
基于javascript bootstrap实现生日日期联动选择
Apr 07 Javascript
Es6 写的文件import 起来解决方案详解
Dec 13 Javascript
jquery平滑滚动到顶部插件使用详解
May 08 jQuery
Vue.js中轻松解决v-for执行出错的三个方案
Jun 09 Javascript
Vue 解决路由过渡动画抖动问题(实例详解)
Jan 05 Javascript
Vue proxyTable配置多个接口地址,解决跨域的问题
Sep 11 Javascript
Canvas三种动态画圆实现方法说明(小结)
Apr 16 Javascript
react合成事件与原生事件的相关理解
May 13 Javascript
跨浏览器的设置innerHTML方法
Sep 18 #Javascript
JavaScript Base64编码和解码,实现URL参数传递。
Sep 18 #Javascript
JavaScript静态的动态
Sep 18 #Javascript
基于Web标准的UI组件 — 树状菜单(2)
Sep 18 #Javascript
JavaScript中的私有成员
Sep 18 #Javascript
javascript的事件描述
Sep 08 #Javascript
由浅到深了解JavaScript类
Sep 08 #Javascript
You might like
PHP的一个完整SMTP类(解决邮件服务器需要验证时的问题)
2006/10/09 PHP
开源php中文分词系统SCWS安装和使用实例
2014/04/11 PHP
php按百分比生成缩略图的代码分享
2014/05/10 PHP
一个简洁实用的PHP缓存类完整实例
2014/07/26 PHP
PHP类的反射用法实例
2014/11/03 PHP
php批量修改表结构实例
2017/05/24 PHP
php实现微信模拟登陆、获取用户列表及群发消息功能示例
2017/06/28 PHP
实例讲解PHP中使用命名空间
2019/01/27 PHP
PHP PDOStatement::rowCount讲解
2019/02/01 PHP
javascript数组的扩展实现代码集合
2008/06/01 Javascript
IE8下Jquery获取select选中的值post到后台报错问题
2014/07/02 Javascript
js重写alert控件(适合学习js的新手朋友)
2014/08/24 Javascript
JavaScript设计模式之策略模式实例
2014/10/10 Javascript
node.js中的console.trace方法使用说明
2014/12/09 Javascript
JavaScript对象属性检查、增加、删除、访问操作实例
2015/07/08 Javascript
swtich/if...else的替代语句
2015/08/16 Javascript
js canvas仿支付宝芝麻信用分仪表盘
2016/11/16 Javascript
微信小程序 扎金花简单实例
2017/02/21 Javascript
angularJS 发起$http.post和$http.get请求的实现方法
2017/05/18 Javascript
JS实现匀加速与匀减速运动的方法示例
2017/09/04 Javascript
浅谈angular4实际项目搭建总结
2017/12/01 Javascript
javascript中的this作用域详解
2019/07/15 Javascript
[11:01]2014DOTA2西雅图邀请赛 冷冷带你探秘威斯汀
2014/07/08 DOTA
[00:32]2018DOTA2亚洲邀请赛Liquid出场
2018/04/03 DOTA
Python中利用原始套接字进行网络编程的示例
2015/05/04 Python
Python中splitlines()方法的使用简介
2015/05/20 Python
Python反转序列的方法实例分析
2018/03/21 Python
在windows下Python打印彩色字体的方法
2018/05/15 Python
对Python中plt的画图函数详解
2018/11/07 Python
Python 动态导入对象,importlib.import_module()的使用方法
2019/08/28 Python
Selenium使用Chrome模拟手机浏览器方法解析
2020/04/10 Python
基于Python的身份证验证识别和数据处理详解
2020/11/14 Python
美国沙龙美发产品购物网站:Hair.com by L’Oreal
2020/11/09 全球购物
大学生党员自我剖析材料
2014/10/06 职场文书
MySQL查询学习之基础查询操作
2021/05/08 MySQL
Python爬取用户观影数据并分析用户与电影之间的隐藏信息!
2021/06/29 Python