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

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

单个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 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>

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

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

猜你喜欢