为啥我无法检索响应 jQuery AJAX 请求而插入的内容的计算高度？

Posted 2023-05-09

【中文标题】为啥我无法检索响应 jQuery AJAX 请求而插入的内容的计算高度？

【英文标题】：Why am I unable to retrieve the calculated height of content inserted in response to a jQuery AJAX request?为什么我无法检索响应 jQuery AJAX 请求而插入的内容的计算高度？

【发布时间】：2010-11-01 07:39:59

【问题描述】：

我确信这已经被反复讨论过，但我很难过。我正在使用 jQuery 对返回一些 html 的 ASP.NET Web 服务进行 AJAX 调用。这部分工作正常。

我想对返回的 HTML 的高度进行一些计算，但是当第一次调用发生时，我得到的高度为 0。我知道我的计算只是在 AJAX 调用完成之前发生，因为在第二次尝试时它起作用了。如果我清除缓存，那么它会再次返回 0。

我需要在呈现 html 后触发一个事件。我已经尝试过像ajaxComplete 这样的全球和本地事件。

$.ajax(
    type: "POST",
    url: "Webservices/Service.asmx/HelloWorld",
    data: "",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(msg) 
        $("#OverlayContent").html(msg.d);
    
    complete: function(msg) 
        alert($("#OverlayContent").height());
     
);

感谢您的帮助。

【问题讨论】：

它在所有浏览器中的行为都相同。

【参考方案1】：

听起来您的高度计算是在 html 插入并呈现到 DOM 之前运行的。确保使用 setTimeout 调用或间隔来错开它。例如：

$.ajax(
    type: "POST",
    url: "Webservices/Service.asmx/HelloWorld",
    data: "",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(msg) 
        $("#OverlayContent").html(msg.d);
        setTimeout(function() getHeight();,100);
    
);

function getHeight()
    // If our height is 0, set a new timeout and we'll check again
    if($("#OverlayContent").height() === 0)
        setTimeout(function() getHeight() , 100);
    
    else
        alert("The height is: " + $("#OverlayContent").height());
    

您需要轮询插入到 DOM 并呈现的 html。

【讨论】：

这是有效的，不一定是最优雅的解决方案，绝对比我拥有的更好。我所做的唯一更改是不进行初始超时，因为无论如何它都会超时。我不敢相信在 DOM 更新后没有办法触发 en 事件。非常感谢！！！

如果我没记错的话，即使是这样的东西也可以：setTimeout(getHeight,1);您只需要发布到浏览器以让它进行 DOM 更改。我认为您不需要在 getHeight 中进行轮询——只需要成功的 setTimeout。

事实上，我认为我什至已经在现代浏览器中使用了 setTimeout(0)。

这不起作用，返回 0 高度。我确实将循环超时更改为 0，以便尽快返回高度。

每个浏览器都有自己的最小超时值，它可以运行的最低超时时间，通常大于零。因此，将超时设置为低于该阈值的任何值实际上会使您回到浏览器的最低值；一个零毫秒的 setTimeout 调用实际上会在大于零毫秒的时间内运行，具体取决于浏览器。

【参考方案2】：

如果不是在成功事件之前，那么很有可能同时触发 complete 事件，因为一旦完成接收 AJAX 数据就会触发 complete。一旦接收到返回数据带有 200 OK 状态码，就会触发成功事件。

你可以使用延迟，但我个人认为使用 jQuery 的 queue() 方法会更好：

success: function(msg) 
        $("#OverlayContent").html(msg.d).queue(function()
            alert($("#OverlayContent").height());
            $(this).dequeue();
        )
    

最后的dequeue()对于恢复正常的事情很重要。

到那时你就完全摆脱了完整的回调。

【讨论】：

我更喜欢这个解决方案，但它为我返回 0。对不起，不过还是谢谢。我会再看看队列。

【参考方案3】：

我可能不完全理解您的问题，但您可以尝试将更新代码设置为在事件完成后立即运行的超时...

//..your other code here

complete:function(m) 
    setTimeout(function() 
        alert($("#OverlayContent").height());
    ,1);


//...the rest of your code

【讨论】：

这接近已回答的问题，但超时必须循环以处理不同的内容大小和加载时间。如果 DOM 在初始超时后还没有准备好，它将不会重新运行。