Question

为了确保每个人都理解我要求的东西，我将贯穿我认为是文档，窗口和视口之间的基本区别....

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

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

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

现在，有很多关于如何获得VIEWPORT维度的好答案。我已经非常精通...跨浏览器和所有。

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

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

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

P.S。我提到过我不想要计算VIEWPORT的解决方案吗？还是窗口？

更新：此解决方案必须适用于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()和宽度。

Answer 3

我认为如果将整个内容包装到零边框，填充和边距的DIV元素中，那么当浏览器完成渲染时，您可以使用jQuery's .height() method来查询包装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 ];
};

任何人都知道如何计算DOCUMENT维度，而不是Javascript中的VIEWPORT？

5 个答案: