Iframe自适应大小

 

Iframe自适应大小

1、不带边框的iframe因为能和网页无缝的结合从而使在不刷新页面的情况下只更新页面的部分数据成为可能。但中iframe的大小却不能像层那样可以“伸缩自如”，所以带来了使用上的麻烦，给iframe设置高度的时候多了也不好，少了更是不行。现在来描述一种iframe 动态调整高度的方法，主要是以下JS函数：

Function SetWinHeight(obj)

{

         var win=obj;

         if(document.getElementById)

         {

                   if(win && !window.opera)

                   {

                            if(win.contentDocument && win.contentDocument.body.offsetHeight)

                            {

                                     win.height=win.contentDocument.body.offsetHeight;

                            }

                            else if(win.Document && win.Document.body.scrollHeight)

                            {

                                     win.height=win.Document.body.scrollHeight;

                            }

                   }

}

}

 

<iframe  align=”center” id=”win” name=”win” width=”” height=”” src=””   frameboder=”0” scrolling=”no”  οnlοad=”Javascript:SetWinHeight(this)” ></iframe>

 

2、当iframe内Src指向的页面内包含有Tab页时，就需要根据每一个Tab页的高度不同来使iframe的高度发生变化。

<iframe  id=”ifDetail”  width=”100%”  src=””  scrolling=”no”  frameborder=”0”  onloae=”Javascript:SetWinHeight(this)”><iframe>

<script>

  Function SetIframeHeight(height)

  {

         var iframeHeight=height+15;

         document.getElementById(“ifDetail”).height=iframeHeight;

}

</script>

在src指向的页面的tab控件：

<asp:TabContainer  runat=”server”  ID=”tabContainer”  ActiveTabIndex=”0”  Width=”100%”  οnclick=”setHeight()”>

         <asp:TabPanel >

                   //Content

</asp:TabPanel>

<asp:TabPanel >

                   //Content

</asp:TabPanel>

<asp:TabPanel >

                   //Content

</asp:TabPanel>

……

</asp:TabContainer>

 

<script>

  Function setHeight()

{

       Parent.SetIframeHeight(document.body.offsetHeight);

}

</script>