有人知道如何计算DOCUMENT尺寸，而不是Javascript中的VIEWPORT吗？

Question

为了确保每个人都能理解我的要求，我将逐一介绍我认为是文档，窗口和视口之间的基本区别。

WINDOW是整个浏览器窗口，包括所有导航栏等。

VIEWPORT是窗口的一部分，用于查看当前的XHTML / HTML / Flash文档...

DOCUMENT是实际内容区域，类似于正文，但包含页面的所有内容。 在视口中任何时候都只能看到其中的一部分（除非页面大小等于或小于视口）。

现在，有很多关于如何获得VIEWPORT尺寸的好答案。 我已经精通于此……跨浏览器等等。

我真正需要知道的是一个简单的跨浏览器解决方案，该解决方案将为我提供所有浏览器（任何版本都不超过3年）中实际文档的尺寸。

我以为我曾经在这里找到一个很好的解决方案……很久以前……但现在找不到了。

任何人？ 感谢您的阅读，希望有人可以提供帮助。

PS我是否提到我不需要用于计算视口的解决方案？ 还是窗户？

更新：此解决方案必须在Opera 10.x，FireFox 3.6.x，IE 7/8 / x，Flock 2.x，Safari 4.x中运行。以下所有答案都不适用于所有浏览器。

因此，如果您尚未进行全面测试，请不要回答该问题。

Answer 1

document.body.scrollHeight和document.body.scrollWidth。

应该给你。

Answer 2

我从jQuery的源代码中偷了这个，并做了一个包装：

编辑：重构函数，以便它返回数组中的宽度和高度。

function getDocumentDimensions() {
    var d = document;
    return [
        Math.max(
            d.documentElement['clientHeight'],
            d.body['scrollHeight'],
            d.body['offsetHeight']
        ),
        Math.max(
            d.documentElement['clientWidth'],
            d.body['scrollWidth'],
            d.body['offsetWidth']
        )
     ]
};

getDocumentDimensions() // [1284, 1265]

jQuery的将是$(document).height()和width。

Answer 3

我认为，如果将全部内容包装到边界为零，填充和边距为零的DIV元素中，那么当浏览器完成渲染时，可以使用jQuery的.height（）方法来查询包装的DIV的实际高度。

我之前已经做过，发现各种浏览器都有特定的问题。 您可能不会遇到我遇到的那些问题，但最终还是解决了该解决方案。

Answer 4

抱歉，这些答案都不是我想要的。 最后，我决定只保留Prototype中的document.body.getWidth（）和document.body.getHeight（）。

Answer 5

我们有类似的需求，并使用此代码。 尚未在Opera / flock中进行过测试，但我们涵盖了所有其他浏览器。 请注意，它并不总是很完美，但在99％以上的案例中都能完成。

function getContentWidthHeight() {
    var pageWidth = 0; 
    var pageHeight = 0;

    if (window.innerHeight && window.scrollMaxY) {
        pageWidth = window.innerWidth + window.scrollMaxX;
        pageHeight = window.innerHeight + window.scrollMaxY;
    } 
    if (document.body.scrollHeight) {
        pageWidth = Math.max(pageWidth, document.body.scrollWidth);
        pageHeight = Math.max(pageHeight, document.body.scrollHeight);
    }
    if (document.body.offsetHeight) {
        pageWidth = Math.max(pageWidth, document.body.offsetWidth);
        pageHeight = Math.max(pageHeight, document.body.offsetHeight);
    }
    if (document.documentElement.offsetHeight) {
        pageWidth = Math.max(pageWidth, document.documentElement.offsetWidth);
        pageHeight = Math.max(pageHeight, document.documentElement.offsetHeight);
    }
    if (document.documentElement.scrollHeight) {
        pageWidth = Math.max(pageWidth, document.documentElement.scrollWidth);
        pageHeight = Math.max(pageHeight, document.documentElement.scrollHeight);
    }
    return [ pageWidth, pageHeight ];
};