多个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 必知必会之closure
Sep 21 Javascript
jQuery 操作option的实现代码
Mar 03 Javascript
node.js 一个简单的页面输出实现代码
Mar 07 Javascript
jquery获取tr中控件值并操作tr实现思路
Mar 27 Javascript
浅谈js图片前端预览之filereader和window.URL.createObjectURL
Jun 30 Javascript
JavaScript数据操作_浅谈原始值和引用值的操作本质
Aug 23 Javascript
bootstrap警告框使用方法解析
Jan 13 Javascript
详解Webpack DLL用法以及功能
Jul 11 Javascript
vue获取input输入值的问题解决办法
Oct 17 Javascript
Node中使用ES6语法的基础教程
Jan 05 Javascript
vue2中使用less简易教程
Mar 27 Javascript
keep-alive保持组件状态的方法
Dec 02 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
一首老MP3,致敬WAR3经典
2021/03/08 魔兽争霸
web方式ftp
2006/10/09 PHP
几个php应用技巧
2008/03/27 PHP
php 遍历数据表数据并列表横向排列的代码
2009/09/05 PHP
php版阿里大于(阿里大鱼)短信发送实例详解
2016/11/30 PHP
在Z-Blog中运行代码[html][/html](纯JS版)
2007/03/25 Javascript
javascript中使用css需要注意的地方小结
2010/09/01 Javascript
关于js日期转化为毫秒数“节省20%的效率和和节省9个字符“问题
2012/03/01 Javascript
Jquery实现带动画效果的经典二级导航菜单
2013/03/22 Javascript
JS控制阿拉伯数字转为中文大写示例代码
2013/09/04 Javascript
javascript避免数字计算精度误差的方法详解
2014/03/05 Javascript
浅谈EasyUI常用控件的禁用方法
2016/11/09 Javascript
利用jQuery实现滑动开关按钮效果(附demo源码下载)
2017/02/07 Javascript
jQuery选择器之表单元素选择器详解
2017/09/19 jQuery
Angular学习教程之RouterLink花式跳转
2018/05/03 Javascript
vue2.0+vuex+localStorage代办事项应用实现详解
2018/05/31 Javascript
微信小程序使用swiper组件实现类3D轮播图
2018/08/29 Javascript
详解如何在Vue项目中导出Excel
2019/04/19 Javascript
微信小程序实现导航栏和内容上下联动功能代码
2020/06/29 Javascript
记一次vue跨域的解决
2020/10/21 Javascript
深入理解python中函数传递参数是值传递还是引用传递
2017/11/07 Python
Python自定义函数定义,参数,调用代码解析
2017/12/27 Python
python实现指定文件夹下的指定文件移动到指定位置
2018/09/17 Python
python 异或加密字符串的实例
2018/10/14 Python
Python操作远程服务器 paramiko模块详细介绍
2019/08/07 Python
windows中安装Python3.8.0的实现方法
2019/11/19 Python
Pytorch 实现focal_loss 多类别和二分类示例
2020/01/14 Python
20佳惊艳的HTML5应用程序示例分享
2011/05/03 HTML / CSS
美国二手奢侈品寄售网站:TheRealReal
2016/10/29 全球购物
户籍证明的格式
2014/01/13 职场文书
运动会广播稿400字
2014/01/25 职场文书
学雷锋志愿者活动总结
2014/06/27 职场文书
女性健康讲座主持词
2015/07/04 职场文书
2019奶茶店创业计划书范本,值得你借鉴
2019/08/14 职场文书
了解Kubernetes中的Service和Endpoint
2022/04/01 Servers
SpringCloud中分析讲解Feign组件添加请求头有哪些坑梳理
2022/06/21 Java/Android