明輝手游網(wǎng)中心:是一個免費(fèi)提供流行視頻軟件教程、在線學(xué)習(xí)分享的學(xué)習(xí)平臺!

對于iframe嵌套 子頁面(含iframe)自動擴(kuò)高的詳細(xì)說明

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

一、jquery獲得(注意:此種方法只適合 父類頁面和子類頁面在同一個域名下,并且子類頁面不能包含iframe)

aa.html(父及頁面)

<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獲得的方法很多,隨便一搜就可以找到,但需要注意的是:子類頁面不能包含iframe,如果子類頁面中有ifrme,還是不能實(shí)現(xiàn)自動擴(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>

三、支持子類頁面中 包含iframe,即iframe嵌套使用(火狐和ie測試,其他瀏覽器還沒測試)

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

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

在子頁面中

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

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


網(wǎng)站建設(shè)是一個廣義的術(shù)語,涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。