装载iframe 子页面，自适应高度

yangedie 楼主

这几天刚刚做了这个东西，有网友问到，所以分享一下。
ie6、firefox2 通过，麻烦有ie7的网友测试一下，

由于有其他代码，剖析出来麻烦，截图也麻烦，代码很简单，所以就直接写部分出来好了。

假设主页面有一个div，里面放置一个iframe
<div id="frameBox">
<iframe id="frameWin" src="1.html" name="opWin" style="width:100%; height:100% " frameborder="0"  scrolling="no"></iframe>
</div>
3个菜单链接，分别在iframe加载 1.html、2.html、3.html 三个页面。

3个子页面分别在自己页面加载完window.onload执行
function aa(){  
        var newHeight = document.body.scrollHeight + 20 + "px";       
        window.parent.document.getElementById("frameBox").style.height = newHeight;
        //以上firefox通过，但是ie6必须加上下面这句，不然iframe高度是改了，但是可见区域没有改
        window.parent.document.getElementById("frameWin").style.height = newHeight;
}

Vayl

楼主 我试了一下，在IE7下不管用。。。。哭了
你告诉我你这代码具体用法吧 我是菜鸟 难道我用错了

yangedie 楼主

觉得原来的方法不是很好

• 每一个嵌进来的页面都要去修改
• 占用了每一个嵌进来的页面的onload
  

所以修改了一下，把函数放在了主页面，ie6、firefox2 通过，希望ie7的网友帮忙测试
页面代码：
<div style="border:1px solid #7e99c6" id="frameBox">
        <iframe id="frameWin" src="01.html" name="opWin" style="width:100%; height:100% " frameborder="0" scrolling="no" onload="test2()"></iframe>
</div>

js脚本（加在主页面）：
function test2(){
        var frameWin = document.getElementById("frameWin");
        var frameBox = document.getElementById("frameBox");
        var newHeight;
        if (frameWin.Document){
                newHeight = frameWin.Document.body.scrollHeight + 20 + "px";
        }else{
                newHeight = frameWin.contentDocument.body.scrollHeight+ 20 + "px";
        }
        frameWin.style.height = newHeight;
        frameBox.style.height = newHeight;
}

yangedie 楼主

谢谢版主
再次修改一下，上面必须注意的一点是，Document必须是大写

1. if (frameWin.Document){
   
2.       newHeight = frameWin.[color=Red]Document[/color].body.scrollHeight + 20 + "px";
   
3. }else{
   
4.       newHeight = frameWin.contentDocument.body.scrollHeight+ 20 + "px";
   
5. }

复制代码

不过这里可以用下面代码代替：
newHeight = frameWin.contentWindow.document.body.scrollHeight + 20 + "px";

skybot

frameWin.window 就可以访问了
这是访问 ifarme 下的 ifarme 的代码
window.frames["MainFarme"].window.frames["menuLeft"].LoadHTML(urldata);

zhangsn

不在同一个域名下就不能用了，说没有权限，为什么呢，谁呢解决这个问题？

playboy2925

能跨域的吗？

Reany

原帖由 playboy2925 于 2008-10-9 15:29 发表
能跨域的吗？

iframe 没有跨域问题吧,只要你引用的页面没有做特殊限制(比如自我检测是否被被人框架应用)应该可以应用任何页面的吧
跨域问题是在js中,由于同源(出于安全考虑)
我遇到的跨域就是xmldom和xmlHttprequest

怎么说呢,虽然跨域带来麻烦,但是我是支持这样做法的,毕竟这样安全些

前段时间我也做了iframe自适应,和楼主一样

我不知道楼主的20px是不是和我的一样呢
我的注释是://因为有横向滚动条会使得高度遮住20px
当然你已可以通过设置iframe的width来解决(不过不推荐这样,不符合逻辑)

[ 本帖最后由 Reany 于 2008-10-16 09:05 编辑 ]

Azero

<iframe id="iFrame1" name="iFrame1" width="100%" onload="this.height=iFrame1.document.body.scrollHeight" frameborder="0" scrolling="no" src="http://bbs.blueidea.com/thread-2861982-1-1.html"></iframe> <!--重要提示：src填写的网页地址一定要和本页面在同一个站点上，否则会报错“拒绝访问！”-->

运行代码 复制代码 另存代码  提示：您可以先修改部分代码再运行

为什么要这么复杂。。我这也一样行。。。

axlrose

FF3貌似无效？

phoenixtreeshow

IE7好像不能用

jd808

<iframe id="iFrame1" name="iFrame1" width="100%" onload="this.height=iFrame1.document.body.scrollHeight；this.width=iFrame1.document.body.scrollWidth" frameborder="0" scrolling="no" src="http://bbs.blueidea.com/thread-2861982-1-1.html"></iframe>
<!--重要提示：src填写的网页地址一定要和本页面在同一个站点上，否则会报错“拒绝访问！”-->

经典啊，不知加this.width=iFrame1.document.body.scrollWidth这个能否行 没测试

tantaiyizu

跨域怎么解决？

loversnie

我怎么没有发现效果呢。。。
恕本人愚钝，100%高度如何可以见得？

Iceyhu

如何把子页面放进主页面里去啊?

6742677

我验证了ie7正常，显示正常。

POPOEVER

02年在论坛的一个帖子里用的，当时 IE 的天下，用 CSS+HTC 的
http://www.popoever.com/POPOEVER/popoever/iframe_load/
其实关键就一句话
parent.document.all.test1.style.height=scrollHeight;

zili8631

有个问题楼主可能没有碰到，那就是连接的子页面高度是可以变化的情况，比如有按钮1 按钮2，默认高度500px，onload的时候触发没有问题，iframe高度变为500，点按钮1高度如果变为1000px，则会出现问题，所以还是第一种方法比较实用，虽然是麻烦了点

猪飞飞

原帖由 yangedie 于 2008-6-12 23:27 发表
觉得原来的方法不是很好

每一个嵌进来的页面都要去修改

占用了每一个嵌进来的页面的onload

所以修改了一下，把函数放在了主页面，ie6、firefox2 通过，希望ie7的网友帮忙测试
页面代码：

       


js ...

我用了这段代码，但问题是第一次载入的页面高度正常取得
但再次载入别的页面，onload是触发了，但scrollHeight取不到 总是为0，请问有谁解决了这个问题了？？？

----------------
OH 不好意思，应该是因为我先将iframe的display设为none了之后再去取scrollHeight，所以取到的值总为零，取消display设置就好了

[ 本帖最后由 猪飞飞 于 2009-3-20 21:46 编辑 ]

kongruxi

不错.其实楼住可以装IE7,然后下个IE6绿色版,这样就可以测试两个了

猪飞飞

IE绿色版我也下了一个，但是太不稳定了，基本上不能用。。。。。。

welcome58

试了楼主的方法，在FF下是有问题的
在FF下
newHeight = frameWin.contentWindow.document.body.scrollHeight + 20 + "px";
取得是网页内容高度，
例如：
一张页面高2600，另一张高600，到第二张页面明明高600，但它依然是2600

momolike

看过这个，一直被这个问题困扰过，有时候用这个还好，有时候用这个怎么老是出错。
前两天面试，人家不让用代码，非得用css做，用css怎么弄，是知道啊？麻烦指点下好吧

aqiang1981

以上方法 FF3.0 不支持自适应高度！！！

vipsir

其实看了下楼主后来改到页面上来在iframe 里面加了一个onload但并不严紧，万一在点面转了链接那高度不一样是原来的高度

其实这个还不错但FF出了点儿问题，哪位大侠补充一下吧
<IFRAME id=main width="100%" height="100%" name=main src="../../table.html" frameBorder=0
      scrolling=no></IFRAME>
      
<script language="javascript" type="text/javascript">

<!--
    function   BodyOnLoad(){
        try
        {

                if(!window.ActiveXObject)
                {
                //document.getElementById("main").style.height=document.body.scrollHeight + 20 + "px";      
                document.getElementById("main").height = document.getElementById("main").document.body.scrollHeight + 20 + "px";
               
                }
                else
                {
       
                        window.document.main.resizeTo(800,window.document.main.document.body.scrollHeight+100);
                }
           
        }
           catch(ex){}
           }

    window.setInterval("BodyOnLoad()",200);
//-->
</script>

cindy511

原帖由 welcome58 于 2009-3-24 16:44 发表
试了楼主的方法，在FF下是有问题的
在FF下
newHeight = frameWin.contentWindow.document.body.scrollHeight + 20 + "px";
取得是网页内容高度，
例如：
一张页面高2600，另一张高600，到第二张页面明明高600， ...

同问

vion77

跨域存在权限问题

zjewfq

这个方法很好，可是Iframe如果链接的地址a.html为一个不可测高度的页面怎么办，例如a.html的高度是js通过屏幕高度而获得的值。这样的话，好像有点问题？

Iceyhu

里面的20是什么意思啊？

bigjames

前阵子项目中遇到跨域问题，找了好久总算找到解决方法！
如果都属于***.com下，可以用在主页面和被引用页面都加 document.domain=“***.com' 的方法来解决
如果不属于同个大域下，就得用传递HASH NAME的方法了
主页面A.html
<iframe id="iId" name="iId" width="780" src="B/job.html" frameborder="no" scrolling="no"></iframe>
<script type="text/javascript">
window.onload = function()
{
var iObj = document.getElementById('iId');
iObjH = frames["iId"].frames["iframeC"].location.hash;
iObj.style.height = iObjH.split("#")[1]+"px";
}
</script>

被引用页 B.html
<iframe id="iframeC" name="iframeC" src="http://www.***.com" frameborder="0" height="0"></iframe>
<!-- www.***.com是你主页面主页地址 -->
<script type="text/javascript">
hashH = document.documentElement.scrollHeight;
urlC = document.getElementById("iframeC").src;
document.getElementById("iframeC").src=urlC+"#"+hashH;
</script>