javascript - 从原型(prototype)中的ajax请求获取高度

Question

如何在原型(prototype)中获取 ajaxreponse 的高度。我需要获取从 Ajax 返回的元素的高度。

new Ajax.Updater('myDiv','myUrl' {
            parameters: '?something=something',
             onSuccess: function(transport){
            //get height from first div returned        

            }
        });

Answer 1

您必须将元素插入到 DOM 中，然后对其进行测量。最好的办法是将它插入到您用完后真正要插入的位置(您正在这样做，因为您使用的是 Ajax.Updater)。 [如果出于某种原因你想先测量它，你可以通过为它附加样式 position: absolute 并给它一个大的负 left 值(例如， left: -10000px) 让它离开页面，然后测量它，然后将它移动到你想要的地方(删除大的 left 等)，但要小心由于样式和其他与其在 DOM 中的位置相关的因素而改变的大小。]

Prototype 调用所有常用的 Ajax 回调，但请注意，onSuccess 在执行更新之前 被调用。要在之后 获得回调，请使用onComplete(但请注意它也会在失败时被调用)或使用onSuccess 中的setTimeout 。

给定您的代码和注释“从返回的第一个 div 获取高度”，使用 onComplete 将如下所示:

onComplete: function() {
    var firstDiv, height;
    firstDiv = $("myDiv").down("div");
    if (firstDiv) {
        height = firstDiv.getHeight();
        // ...
    }
}

Live example

如果您更喜欢 onSuccess + setTimeout 方法(但请注意，添加元素和测量元素之间会有更长的延迟):

onSuccess: function() {
    setTimeout(function() {
        var firstDiv, height;
        firstDiv = $("myDiv").down("div");
        if (firstDiv) {
            height = firstDiv.getHeight();
            // ...
        }
    }, 0); // Won't really be 0ms, but not much longer
}

Live example