公司網(wǎng)站后臺(tái)原本不是用iframe設(shè)計(jì)的，后來(lái)為了節(jié)約資源，經(jīng)過(guò)討論決定把網(wǎng)站后臺(tái)改成iframe。iframe可以實(shí)現(xiàn)和ajax相似的 局部刷新的效果（他們的實(shí)現(xiàn)原理是不同的），iframe雖然很強(qiáng)大，但其不能根據(jù)子頁(yè)面的高度自動(dòng)擴(kuò)高，這點(diǎn)很惱人啊，于是我在網(wǎng)上搜了搜，找到以下幾種方法，然后進(jìn)行部分改進(jìn)了。

一、jquery獲得（注意：此種方法只適合 父類頁(yè)面和子類頁(yè)面在同一個(gè)域名下，并且子類頁(yè)面不能包含iframe）

aa.html(父及頁(yè)面)

<iframe name="rightcontent"  id="rightcontent" src='bb.html' frameborder="0" width="100%" scrolling="no"></iframe>

$("#rightcontent").load(function(){
       var mainheight = $(this).contents().find("body").height()+30;
       $(this).height(mainheight);
    });

二、用js獲得（網(wǎng)上js獲得的方法很多，隨便一搜就可以找到，但需要注意的是：子類頁(yè)面不能包含iframe，如果子類頁(yè)面中有ifrme，還是不能實(shí)現(xiàn)自動(dòng)擴(kuò)高的效果的）

function SetCwinHeight(obj) {
    var cwin = obj;
    if (document.getElementByIdx_x_x_x) {       
      if (cwin && !window.opera) {
            if (cwin.contentDocument && cwin.contentDocument.body.offsetHeight){
               cwin.height = cwin.Document.body.offsetHeight + 30;
               alert(cwin.height); //FF NS
            }else if (cwin.Document && cwin.Document.body.scrollHeight){
                cwin.height = cwin.Document.body.scrollHeight + 10;
            } //IE
        }else {
            this.height=rightcontent.document.body.scrollHeight+30
            if (cwin.contentWindow.document && cwin.contentWindow.document.body.scrollHeight)
                cwin.height = cwin.contentWindow.document.body.scrollHeight; //Opera
        }
    }
}

<iframe name="rightcontent"  id="rightcontent" src='bb.html' frameborder="0" width="100%" scrolling="no" onload="SetCwinHeight(this)">
</iframe>

三、支持子類頁(yè)面中 包含iframe，即iframe嵌套使用（火狐和ie測(cè)試，其他瀏覽器還沒(méi)測(cè)試）

 <iframe name="rightcontent"  id="rightcontent" src='bb.html' frameborder="0" width="100%" scrolling="no" onload="this.height=rightcontent.document.body.scrollHeight+50"></iframe>

四、這個(gè)是補(bǔ)充的，網(wǎng)站用了方法三，但是發(fā)現(xiàn)如果如果牽扯到跨域名了，方法三不起作用了，是因?yàn)槲以谧禹?yè)面中 寫了 <script type="text/javascript">document.domain = 'xxx.com';</script>，這種情況下怎么辦呢，代碼如下：

在子頁(yè)面中

<script type="text/javascript">
//設(shè)置域信息
document.domain = 'xxx.com';
//設(shè)置父級(jí)頁(yè)面引用自身的iframe高度
function setHeight(){
  //判斷是否為頂級(jí)頁(yè)面
  if(window.top!=window.self){
      parent.document.getElementByIdx_x('rightcontent').height=document.body.scrollHeight+20
  }
}
setHeight();
</script>

以上就是關(guān)于iframe嵌套 子頁(yè)面（含iframe）自動(dòng)擴(kuò)高的詳解的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！