多个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 相关文章推荐
JavaScript中实现map功能代码分享
Jun 11 Javascript
浅析jQuery移动开发中内联按钮和分组按钮的编写
Dec 04 Javascript
jQuery hover事件简单实现同时绑定2个方法
Jun 07 Javascript
浅谈jquery页面初始化的4种方式
Nov 27 Javascript
node.js入门教程之querystring模块的使用方法
Feb 27 Javascript
canvas实现爱心和彩虹雨效果
Mar 09 Javascript
基于代数方程库Algebra.js解二元一次方程功能示例
Jun 09 Javascript
es6 字符串String的扩展(实例讲解)
Aug 03 Javascript
最新Javascript程序员面试试题和解题方法
Nov 23 Javascript
深入理解js A*寻路算法原理与具体实现过程
Dec 13 Javascript
BootstrapValidator实现表单验证功能
Nov 08 Javascript
基于redis的小程序登录实现方法流程分析
May 25 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
冰滴咖啡制作步骤
2021/03/03 冲泡冲煮
使用PHP模拟HTTP认证
2006/10/09 PHP
php函数连续调用实例分析
2015/07/30 PHP
PHP的swoole扩展安装方法详细教程
2016/05/18 PHP
php实现大文件断点续传下载实例代码
2019/10/01 PHP
js实现感应鼠标图片透明度变化的方法
2015/02/20 Javascript
javascript等号运算符使用详解
2015/04/16 Javascript
包含中国城市的javascript对象实例
2015/08/03 Javascript
jquery判断当前浏览器的实现代码
2015/11/07 Javascript
JavaScript实现下拉菜单的显示和隐藏
2016/01/05 Javascript
JavaScript简单实现弹出拖拽窗口(二)
2016/06/17 Javascript
jquery组件WebUploader文件上传用法详解
2020/10/23 Javascript
详解前端自动化工具gulp自动添加版本号
2016/12/20 Javascript
bootstrapValidator bootstrap-select验证不可用的解决办法
2017/01/11 Javascript
JavaScript实现审核流程状态的动态显示进度条
2017/03/15 Javascript
js 用于检测类数组对象的函数方法
2017/05/02 Javascript
微信小程序 支付功能(前端)的实现
2017/05/24 Javascript
微信小程序返回多级页面的实现方法
2017/10/27 Javascript
Vue自定义指令封装节流函数的方法示例
2018/07/09 Javascript
js中apply()和call()的区别与用法实例分析
2018/08/14 Javascript
JS/HTML5游戏常用算法之路径搜索算法 A*寻路算法完整实例
2018/12/14 Javascript
VUE和Antv G6实现在线拓扑图编辑操作
2020/10/28 Javascript
Python正则表达式匹配HTML页面编码
2015/04/08 Python
Python实现信用卡系统(支持购物、转账、存取钱)
2016/06/24 Python
实例详解python函数的对象、函数嵌套、名称空间和作用域
2019/05/31 Python
Python selenium键盘鼠标事件实现过程详解
2020/07/28 Python
Champs Sports加拿大:北美最大的以商场为基础的专业运动鞋和服装零售商之一
2018/05/01 全球购物
怀旧收藏品和经典纪念品:Betty’s Attic
2018/08/29 全球购物
产品工艺师的岗位职责
2013/11/15 职场文书
公务员转正鉴定材料
2014/02/11 职场文书
恶搞卫生巾广告词
2014/03/18 职场文书
财务部绩效考核方案
2014/05/04 职场文书
文明美德伴我成长演讲稿
2014/05/12 职场文书
2015年大学生村官工作总结
2015/04/21 职场文书
创业计划书之家教中心
2019/09/25 职场文书
阿里面试Nacos配置中心交互模型是push还是pull原理解析
2022/07/23 Java/Android