如何獲取ajax加載內容的高度？

Question

在我的頁面中，我通過.load（）在div中加載動態內容。在這個加載的div中我有一個subanvi，我在加載的內容中加載額外的內容。這到目前爲止是完美的。

但是在加載之後，我想對包裝的高度進行動畫處理（除了頁腳外，這些頁面都是圍繞頁面的），但不知道如何導致我的函數只獲取第一個顯示內容的高度。如何獲得新加載內容的高度？

這是我的函數：

$(function(){ 

     var 
     $subContent = $(".subcontent"), 
     $subWrap = $(".maincontent"), 
     $newWrap = $("#wrapper"), 
     subHeight = 0, 
     $el; 

     $newWrap.height($newWrap.height()); 
     subHeight = $newWrap.height() - $subContent.height(); 

     $("ul.linkbox li a").live('click', function (e) { 
    newLink = $(this).attr("href"); 
     e.preventDefault(); 

    $(".textbox").find(".subcontent").fadeTo(200,0, function() { 

    $(".textbox").load(newLink + " .subcontent" , function() { 

    $(".subcontent").fadeTo(200,1, function() { 

     $newWrap.animate({height: subHeight + $subContent.height() + "px"}); 

    }); 
    }); 
    }); 
     }); 

}); 

Answer 1

您計算subHeight任何動畫發生之前

subHeight = $newWrap.height() - $subContent.height(); 

然後用它之後的一些動畫發生在你的元素

$newWrap.animate({height: subHeight + $subContent.height() + "px"}); 

這可能會影響你的代碼的行爲。 我建議您在需要時再次重新計算subHeight：

$newWrap.animate({height: $newWrap.height() - $subContent.height() + $subContent.height() + "px"}); 

Answer 2

如果我沒有誤會你，你正在試圖讓這Ajax響應內部發出的內容高度。我知道的第一種方式是$('#objectId').attr('height')。

var heightOfSubContentn = $(".textbox").find(".subcontent").attr("height") 

Answer 3

從你的問題採取的措施（請切勿將回答質疑）：

我剛剛添加下面的代碼來得到它現在的工作：

$("#wrapper").css("height","auto"); 

Answer 4

根據我的經驗，可靠地獲取高度的唯一方法是創建（通過頁面加載或在ajax執行時即時）動態創建一些通過css放置在用戶視圖外的容器：

#stage { 
    /* hide the container while maintaining ability to render content */ 
    visibility: hidden; 
    opacity:0; 

    /* position out of view of user */ 
    position: absolute; 
    z-index: -1; 

    top: -9999em; 
    left: -9999em; 
} 

注意：如果你要載入您的Ajax內容到區域都有一組寬度確保這個寬度應用到#stage元素太多，否則呈現的內容將不正確的高度。

如果這是一次性用例，那麼您當然可以在css中強制編碼寬度，或者您可以根據內容區域設置觸發ajax負載的單擊事件的寬度。

這裏是你怎麼想，現在結構AJAX負載的例子：

// We're assuming that the content area is #area 
// and that the out-of-view stage is #stage 
// .myTrigger can be anything really, probably a link that get's the new content via an href. 

$('.myTrigger').click(function(event) { 
    var stage = $('#stage'), 
     area = $('#area'); 

    // get the width of the destination and set this to be the width of your stage container. 
    stage.width(area.width()); 

    // fire the ajax request 
    $.ajax({ 
     url: 'whatevertheURLis', 
     type: 'GET', 
     dataType: 'html', 
     complete: function (xhr, textStatus) { 
      var ajaxContent = $(xhr.responseText); 
      var newHeight = stage.append(ajaxContent).getHeight(); // this will be a number 

      // we're now setting the new height onto our content area element and then inject the ajax content. 
      // the area.height(newHeight) could equally be an animate statement with the html(ajaxContent) being run in its callback. 
      area.height(newHeight).html(ajaxContent); 
     } 
    }); 


}); 

// helper function to get the height quickly from the stage element. 
$.fn.getHeight = function() { 
    var stage = $('#stage'); 
    // store content height. 
    var stageHeight = stage.height(); 

    // remove the temporary content. 
    stage.children().remove(); 

    // return the height. 
    return stageHeight; 
}; 

希望這有助於。