多个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 相关文章推荐
ppk谈JavaScript style属性
Oct 10 Javascript
JS面向对象、prototype、call()、apply()
May 14 Javascript
javascript form 验证函数 弹出对话框形式
Jun 23 Javascript
文本框获得焦点和失去焦点的判断代码
Mar 18 Javascript
Javascript中找到子元素在父元素内相对位置的代码
Jul 21 Javascript
js实现n秒倒计时后才可以点击的效果
Dec 20 Javascript
jQuery获取checkbox选中的值
Jan 28 Javascript
Node.js中用D3.js的方法示例
Jan 16 Javascript
详解vue事件对象、冒泡、阻止默认行为
Mar 20 Javascript
使用vue中的v-for遍历二维数组的方法
Mar 07 Javascript
vue系列之requireJs中引入vue-router的方法
Jul 18 Javascript
javascript设计模式 ? 简单工厂模式原理与应用实例分析
Apr 09 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设置进度条的方法
2015/07/08 PHP
CodeIgniter集成smarty的方法详解
2016/05/26 PHP
PNG背景在不同浏览器下的应用
2009/06/22 Javascript
按钮JS复制文本框和表格的代码
2011/04/01 Javascript
extjs4 treepanel动态改变行高度示例
2013/12/17 Javascript
js实现同一页面可多次调用的图片幻灯切换效果
2015/02/28 Javascript
JavaScript实现的字符串replaceAll函数代码分享
2015/04/02 Javascript
JS实现的自动打字效果示例
2017/03/10 Javascript
利用JS实现简单的瀑布流加载图片效果
2017/04/22 Javascript
Vue.js进行查询操作的实例详解
2017/08/25 Javascript
详解使用angular的HttpClient搭配rxjs
2017/09/01 Javascript
jQuery EasyUI 折叠面板accordion的使用实例(分享)
2017/12/25 jQuery
jQuery代码优化方法总结
2018/01/29 jQuery
vue使用vue-i18n实现国际化的实现代码
2018/04/08 Javascript
在vue中多次调用同一个定义全局变量的实例
2018/09/25 Javascript
nodejs中用npm初始化来创建package.json的实例讲解
2018/10/10 NodeJs
详解React中合并单元格的正确写法
2019/01/08 Javascript
python虚拟环境 virtualenv的简单使用
2020/01/21 Javascript
[41:17]完美世界DOTA2联赛PWL S3 access vs CPG 第二场 12.13
2020/12/17 DOTA
Python处理JSON时的值报错及编码报错的两则解决实录
2016/06/26 Python
python爬虫面试宝典(常见问题)
2018/03/02 Python
在python中实现将一张图片剪切成四份的方法
2018/12/05 Python
基于python SMTP实现自动发送邮件教程解析
2020/06/02 Python
keras使用Sequence类调用大规模数据集进行训练的实现
2020/06/22 Python
HTML5之WebGL 3D概述(下)—借助类库开发及框架介绍
2013/01/31 HTML / CSS
如何用H5实现一个触屏版的轮播器的实例
2017/01/09 HTML / CSS
Web前端页面跳转并取到值
2017/04/24 HTML / CSS
HTML5中的Web Notification桌面通知功能的实现方法
2019/07/29 HTML / CSS
草莓巧克力:Shari’s Berries
2017/02/07 全球购物
Mybag美国/加拿大:英国奢华包包和名牌手袋网站
2020/02/16 全球购物
施工员岗位职责
2014/03/16 职场文书
文艺晚会主持词
2014/03/24 职场文书
运动会演讲稿50字
2014/08/25 职场文书
2014年机关后勤工作总结
2014/12/16 职场文书
个人党性分析材料
2014/12/19 职场文书
2016年基层党组织创先争优承诺书
2016/03/25 职场文书