iframe自适应高度，多层嵌套iframe自适应高度的解决方法

iframe自适应高度，多层嵌套iframe自适应高度的解决方法

在页面无刷新更新方面，虽然现在的ajax很强悍，但是处理代码相对多点。想比之下，iframe就简单多了！处理iframe的自适应宽、高，会经常用到，网上整理了一份，写在这里备用：

单个iframe 高度自适应：

<iframe id="iFrame1" name="iFrame1" width="100%" onload="this.height=iFrame1.document.body.scrollHeight" frameborder="0" src="index.htm"></iframe>

起作用的是这句：onload="this.height=iFrame1.document.body.scrollHeight"

多层嵌套iframe 高度自适应：

A页面的iframe：

<iframe id="frame_content" src=”B.php“ name="right" width="1003" frameborder="0" scrolling="no" ></iframe>

B.php页面又有一个iframe：

<iframe width="750" name="rightform" id="rightform" src="KinTimMng_right_init.php" frameborder="0" scrolling="no" onload="this.height=rightform.document.body.scrollHeight;parent.document.getElementById('frame_content').style.height= document.body.scrollHeight
+ 'px';" ></iframe>

起作用的代码是这句：onload="this.height=rightform.document.body.scrollHeight;parent.document.getElementById('frame_content').style.height= document.body.scrollHeight + 'px';"

onload的时候执行了两条js语句：

1、设置当前iframe自己的高度自适应

this.height=rightform.document.body.scrollHeight  

2、设置父iframe的高度自适应（注意后面的高度单位px，如果不加单位，firefox下不起作用）

parent.document.getElementById('frame_content').style.height= document.body.scrollHeight + 'px'

以上代码在ie6、ie7、ie8、firefox3.5下测试通过

最后使用的代码，嵌套iframe，子iframe加载页面，实现父子iframe高度自适应。
（已验证过可以，在ie和firefox中）

<!-- 右边显示区 -->

                    <td width="730">

                       <script type="text/javascript" language="javascript">

                            //子iframe中刷新src，要求子iframe高度变，父iframe也要变。否则不会自动高度自适应   

                            //此函数用在子iframe所在页面中。

                            function iframeautoheight_childframe(childframe_id,parentframe_id)

                            {   

                                try

                                {

                                    alert('child' + "," + childframe_id + "," + parentframe_id);

                                    var childframe_obj=document.getElementById(childframe_id);

                                    var parentframe_obj=parent.document.getElementById(parentframe_id);

                                    alert(childframe_obj + "," + parentframe_obj);
                                    //获取iframe的documnet!!!  为了判断iframe内页面的实际高度,必须获取!!!!。

                                    //ie6,7用的是document.frames['iframepage_sub'].document

                                    //ie8,firefox用的是childframe_obj.contentDocument

                                    var childframedocument_obj= document.frames ? document.frames['iframepage_sub'].document : childframe_obj.contentDocument;

                                    var parentframedocument_obj=parent.document.frames ? parent.document.frames['iframepage'].document : parentframe_obj.contentDocument;

                                    //alert(childframedocument_obj + "," + parentframedocument_obj);

                                    //设置子iframe的高度                                  

                                    childframe_obj.height=300;  //复位一下，否则可能不刷新。

                                    childframe_obj.height=childframedocument_obj.body.scrollHeight;  //子frame页面内容的高度

                                    //alert();

                                    //设置父iframe的高度

                                    //更改子iframe的src后，必须更改父iframe的height

                                    parentframe_obj.height=300;

                                    parentframe_obj.height=parentframedocument_obj.body.scrollHeight;

                                }catch(e){alert(e.message);}

                            }

                        </script>

                        <iframe id="iframepage_sub" name="iframepage_sub" src="xygk_xxjj.htm" frameBorder=0 scrolling=no width="730"  onLoad="iframeautoheight_childframe(this.id,'iframepage');"></iframe>

                    </td>

不嵌套iframe,单独iframe的成功示例：

        <div>

            <script type="text/javascript" language="javascript">   

                function iFrameHeight() {   

                var ifm= document.getElementById("iframepage");

                //必须获取iframe的document,才能得到iframe页面内的内容高度。  

                //ie6,ie7document.frames["iframepage"].document

                //ie8,firefox用的是ifm.contentDocument

                var subWeb = document.frames ? document.frames["iframepage"].document : ifm.contentDocument;   

                if(ifm != null && subWeb != null) {

                   ifm.height=0;

                   ifm.height = subWeb.body.scrollHeight;

                }   

                }   

            </script>      

            <table width="100%"><tr>

                <td style="width:15px;"> </td>

                <td>

                    <!-- iframe左边空15px，是为了和大图配合，大图左边留白了15px -->

                    <iframe src="main.htm" id="iframepage" name="iframepage" frameBorder=0 scrolling=no width="1002px" onLoad="iFrameHeight();" >

                    </iframe>

                </td>

                <td style="width:11px;"> </td>

            </tr></table>

        </div>