$(document）.height(）在刷新时随机化值(Safari 5.1.10）

$(document).height() randomizes value on refresh (Safari 5.1.10)

本文关键字：Safari 随机化 刷新 document height      更新时间：2023-09-26

我使用$(document).height()在块上设置heightCSS属性。这是Safari 5.1.10（OSX 10.6.8）的一个变通方法，因为vh单元（视口高度）在此版本上不起作用。

(function() {
    if(!Modernizr.cssvhunit) $("#sidebar").css("height", $(document).height()+"px");
})();

问题是每次刷新页面时，$(document).height()返回的值都不相同。有时是视口高度，有时是文档高，有时是介于两者之间的值。。。

我使用：Modernizr 2.8.3来检测vh单元支持，jQuery 1.11.0，Lightbox 2.7.1（没有它仍然会出现问题）和Skeleton 2.0.4

我也尝试过这种变通方法，但没有奏效：

function getDocHeight() {
    var D = document;
    return Math.max(
        D.body.scrollHeight, D.documentElement.scrollHeight,
        D.body.offsetHeight, D.documentElement.offsetHeight,
        D.body.clientHeight, D.documentElement.clientHeight
    );
}

我不知道是什么导致这个假定的常数值是可变的。。。

听起来，当页面中的图像仍在加载时，您可能正在获得高度，因此页面仍在扩展。

在这种情况下，请尝试获取$(window).load(fn)事件下的高度，因为所有图像都应该在该点加载。

有时测量一段时间后的高度和宽度会有所帮助。

setTimeout(function() {
  // get w, h
},1);

说明：浏览器中的JS是一个基于eved的前端系统。重复以下步骤：

  1. 接收用户/超时/AAJAX事件
  2. 运行JavaScript侦听器（如果有）
  3. 重新呈现DOM更改

页面呈现发生在#3，但JS代码运行在#2，，然后为显示元素确定最终/正确的大小。当#3已经完成时，在#2中设置一个非常短的超时将发生，以重新运行3步循环。

这就是为什么当你隐藏一个元素，然后显示它，并重复它100次时没有效果：在#2期间没有渲染，如果你不显示它，#3将不会发现任何变化，什么都不会发生。

好吧，它不太优雅，而且需要额外的精力来编写UI程序，因为它无法在需要的时候获得尺寸。

相关文章：