Iframe 自适应高度无限级父框架多层框架自适应

superadmin · 发表于 2011-2-28 12:46:51

问题描述
今天在处理一个Iframe自适应高度时遇到一个多层Iframe引用时的高度不能撑开的问题，效果同Demo1.

原因分析
问题是由引用的顺序引起的，我们假设有3层Iframe引用，h1.html,h2.html,h3.html  h1包含h2,h2又包含h3,h3.html中有内容会出现高度适应问题，一般的处理方式是我们在引用h3的iframe中加入onload事件来让这个Iframe高度自适应引用的页面高度。这时我们打开h1.html就开发页面看起还是没有撑开，这是因为页面是一级一级的加载下去的，当h1引用h2时，h2的高度是固定的，当h3加载完毕的时候h2的高度做了变化，但是这时h1的引用页面高度并没有改变就造成了页面看起来还是没有撑开，经和同事讨论后编写了一个JS的自动重新计算parent(父页面)中Iframe元素的高度，从而解决这个问题，原理主要是通过一直循环获取页面parent的Iframe元素，当获取到top层时就结束

代码
单个Iframe适应

Javascript代码
1.onload="this.style.height=iframe1.document.body.scrollHeight"
onload="this.style.height=iframe1.document.body.scrollHeight"

注：iframe1为该框架的ID，我在尝试不硬写名字的自适应方法，如果成功就换上来。

自适应多级Iframe高度

Javascript代码
1.//进行Iframe的自动撑开,让所有父页面的Iframe都自动适应包含页高度
2.function autoHeight(){
3. var doc = document,
4.       p = window;
5. while(p = p.parent){
6.       var frames = p.frames,
7.          frame,
8.          i = 0;
9.       while(frame = frames[i++]){
10.          if(frame.document == doc){
11.             frame.frameElement.style.height = doc.body.scrollHeight;
12.             doc = p.document;
13.             break;
14.          }
15.       }
16.       if(p == top){
17.          break;
18.       }
19. }
20.}

superadmin · 发表于 2011-2-28 12:47:08

让IFRAME自动调整大小
在页面中有时会用到IFRAME，但指向页面的大小往往会有变动，这里我们可以通过添加ONLOAD事件来自动调整其大小

代码如下：

Html代码
1.onload="this.height=this.contentWindow.document.body.scrollHeight"

superadmin · 发表于 2011-2-28 12:47:19

可以用框架，直接显示你想要显示的网页。
代码：<IFRAME> </IFRAME>

例如：<IFRAME id=headlogin marginWidth=0 marginHeight=0 src="/bbs/index.php" frameBorder=0 width=100% scrolling=no height=2000 onload="this.height=this.contentWindow.document.body.scrollHeight"></IFRAME> 引用的是某个论坛的首页。

superadmin · 发表于 2011-2-28 12:49:05

跨域都白扯
不如在父页面
var iframe = document.getElementById(xx);
if(iframe)
{
var bHeight = iframe.contentWindow.document.body.scrollHeight;
var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
var height = Math.max(bHeight, dHeight);
iframe.height = height;
}

		自动登录	找回密码
密码			注册

全国各地医院查询	重量转换换算	RGB颜色查询	交通标志大全	各类快递查询
简体繁体转换	黄金价格实时走势	万年历查询	实时汇率转换	列车时刻查询
在线翻译工具	CSS中文手册	HTML学习教程	MySQL中文手册	JavaScript中文手册
PHP安全基础手册	PHP5面向对象编程教程	正则表达式系统教程	SQL Server精华	Apache 2.2 中文手册
DOS命令全集指南	windows脚本技术中文版	股票行情查询	历史上的今天	邮编区号查询
长度转换换算	货币汇率转换	常用电话号码	体育彩票查询	手机位置查询
域名Whois信息查询	谷歌PR值查询	台州网站建设	台州网站开发	台州域名注册
天气预报查询	长度转换换算器	在线电子地图	车牌号码查询	中国百家姓查询

Iframe 自适应高度无限级父框架多层框架自适应

相关帖子

浏览过的版块

Iframe 自适应高度 无限级父框架 多层框架自适应

相关帖子

浏览过的版块

Iframe 自适应高度无限级父框架多层框架自适应