使用JavaScript获取文档的真实大小

一些网站（如stackoverflow.com）设置

高度：100%

和/或

宽度：100%

的

和/或

元素（出于某种原因，我不理解）。CSS默认为文档中的所有元素（afaik）设置

overflow:visible

，因此与父元素边界重叠的子元素不会被切断，如果它们离开视口，浏览器可能会显示滚动条。到目前为止，一切顺利

但是如果为两个元素

html

和

body

都设置了

height:100%

，那么如何找出整个文档的真实（完整）大小呢？在这种情况下，

document.documentElement.getBoundingClientRect（）

和

document.body.getBoundingClientRect（）

将只返回可见视口的高度

试用：转到控制台并在控制台中执行以下代码：

var de = document.documentElement;
var b = document.body;

console.log('Before:');
console.log(de.getBoundingClientRect().height);  // or de.offsetHeight
console.log(b.getBoundingClientRect().height);  // or b.offsetHeight

de.style.height = '100%';
b.style.height = '100%';

console.log('After:');
console.log(de.getBoundingClientRect().height);  // or de.offsetHeight
console.log(b.getBoundingClientRect().height);  // or b.offsetHeight

在我的例子中，输出是：

Before:
638
8352.2333984375
After:
638
638

第一个“638”是因为在stackoverflow.com上，元素CSS

height

属性已经设置为100%，就像我上面写的那样。但是垂直滚动条仍然可见，页面可以向下滚动

那么，如果两个元素的高度都设置为100%，我还需要哪些选项来确定整个文档的实际大小

offsetHeight

返回相同的值，因此不能使用它（它也不考虑任何CSS转换，如倾斜）。我能想到的唯一方法是遍历文档中的所有元素，得到它们在底边的绝对（相对于文档边界）位置，并取最大值。也许是这样的：

(function() {
    var getAbsolutePos = function(elm) {
        var pos = {x: 0, y: 0};

        if (elm.offsetParent) {
            do {
                pos.x += elm.offsetLeft;
                pos.y += elm.offsetTop;
            } while (elm = elm.offsetParent);
        }

        return pos;
    };

    var e = document.querySelectorAll("*");
    var btm, docHeight = 0;
    for (var i=0; i < e.length; ++i)
    {
        btm = getAbsolutePos(e[i]).y + e[i].offsetHeight;
        if (btm > docHeight) {
            docHeight = btm;
        }
    }

    console.log('Page height: ' + docHeight);
})();

// Output: "Page height: 8416"

（函数（）{
var getAbsolutePos=函数（elm）{
var pos={x:0，y:0}；
if（elm.offsetParent）{
做{
位置x+=elm.offsetLeft；
位置y+=elm.offsetTop；
}而（elm=elm.offsetParent）；
}
返回pos；
};
var e=document.queryselectoral（“*”）；
var btm，八分之一=0；
对于（变量i=0；i8）{
多克八=btm；
}
}
console.log（'页面高度：'+8）；
})();
//输出：“页面高度：8416”

但这看起来相当脏，我猜这可能是资源密集型的（取决于元素计数），尤其是当这种计算发生在onMouseMove事件中时。更糟糕的是，移动设备的功耗会增加

---

是否有其他更有效的方法可以使用纯JavaScript确定文档的完整大小？

查看这篇关于视口、设备和文档大小的文章，以获得真实的文档大小。请使用document.body.clientWidth和document.body.clientHeight。我试了一下，得到了与8416相同的结果，对吗？

使用

clientHeight

我又得到了相同的视口尺寸。但是

scrollHeight

看起来不错。我认为这可能是解决办法。我必须先测试一下，但是谢谢你的提示！我会在测试后给你回复。