多个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 相关文章推荐
弹出广告特效代码(一个IP只弹出一次)
May 11 Javascript
Javascript面向对象编程(二) 构造函数的继承
Aug 28 Javascript
Javascript 键盘事件的组合使用实现代码
May 04 Javascript
javascript重写alert方法的实例代码
Mar 29 Javascript
一个JavaScript递归实现反转数组字符串的实例
Oct 14 Javascript
jquery实现超简洁的TAB选项卡效果代码
Aug 28 Javascript
jQuery UI库中dialog对话框功能使用全解析
Apr 23 Javascript
js获取隐藏元素宽高的实现方法
May 19 Javascript
Vue 组件间的样式冲突污染
Aug 31 Javascript
React+TypeScript+webpack4多入口配置详解
Aug 08 Javascript
原生js实现随机点名
Jul 05 Javascript
手动实现vue2.0的双向数据绑定原理详解
Feb 06 Vue.js
跨浏览器的设置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
解析phpstorm + xdebug 远程断点调试
2013/06/20 PHP
Thinkphp5+Redis实现商品秒杀代码实例讲解
2020/12/29 PHP
js点击页面其它地方将某个显示的DIV隐藏
2012/07/12 Javascript
js实现鼠标滚轮控制图片缩放效果的方法
2015/02/20 Javascript
JavaScript使用FileSystemObject对象写入文本文件内容的方法
2015/08/05 Javascript
jQuery实现自定义右键菜单的树状菜单效果
2015/09/02 Javascript
JS实现的新浪微博大厅文字内容滚动效果代码
2015/11/05 Javascript
javascript绘制漂亮的心型线效果完整实例
2016/02/02 Javascript
ArtEditor富文本编辑器增加表单提交功能
2016/04/18 Javascript
Angular2内置指令NgFor和NgIf详解
2016/08/03 Javascript
jQuery实现移动端Tab选项卡效果
2017/03/15 Javascript
vue.js开发环境搭建教程
2017/05/04 Javascript
微信小程序调用PHP后台接口 解析纯html文本
2017/06/13 Javascript
jquery层次选择器的介绍
2019/01/18 jQuery
如何在vue里面优雅的解决跨域(路由冲突问题)
2019/01/20 Javascript
小程序实现图片移动缩放效果
2020/05/26 Javascript
[00:59]DOTA2背景故事第二期之四大基本法则
2020/07/07 DOTA
Python实现将16进制字符串转化为ascii字符的方法分析
2017/07/21 Python
解决Django模板无法使用perms变量问题的方法
2017/09/10 Python
解决python3中的requests解析中文页面出现乱码问题
2019/04/19 Python
Python创建一个元素都为0的列表实例
2019/11/28 Python
python飞机大战pygame游戏框架搭建操作详解
2019/12/17 Python
基于python+selenium的二次封装的实现
2020/01/06 Python
tensorflow 利用expand_dims和squeeze扩展和压缩tensor维度方式
2020/02/07 Python
浅谈Pycharm最有必要改的几个默认设置项
2020/02/14 Python
Pytorch数据拼接与拆分操作实现图解
2020/04/30 Python
conda安装tensorflow和conda常用命令小结
2021/02/20 Python
css3中背景尺寸background-size详解
2014/09/02 HTML / CSS
YOOX台湾:意大利奢侈品电商
2018/10/13 全球购物
期中考试后的反思
2014/02/08 职场文书
采购助理岗位职责
2014/02/16 职场文书
演讲比赛策划方案
2014/06/11 职场文书
企业爱心捐款倡议书
2015/04/27 职场文书
幼儿园百日安全活动总结
2015/05/07 职场文书
JavaScript使用canvas绘制坐标和线
2021/04/28 Javascript
JS前端使用canvas实现扩展物体类和事件派发
2022/08/05 Javascript