javascript - 在 JS 中获取页面高度(跨浏览器)

Question

在跨浏览器兼容的 JS 中获取实际页面(而非窗口)高度的最佳方法是什么？

我见过几种方法，但它们都返回不同的值...

self.innerHeight 要么 document.documentElement.clientHeight 要么 document.body.clientHeight 还是别的？

一种似乎可行的方法是:

var body = document.body,
    html = document.documentElement;

var height = Math.max( body.scrollHeight, body.offsetHeight, 
                       html.clientHeight, html.scrollHeight, html.offsetHeight );

Answer 1

页面/文档高度目前受制于 vendor (IE/Moz/Apple/...) 实现，并且没有跨浏览器的标准和一致的结果。

查看 JQuery .height() 方法；

if ( jQuery.isWindow( elem ) ) {
            // Everyone else use document.documentElement or document.body depending on Quirks vs Standards mode
            // 3rd condition allows Nokia support, as it supports the docElem prop but not CSS1Compat
            var docElemProp = elem.document.documentElement[ "client" + name ],
                body = elem.document.body;
            return elem.document.compatMode === "CSS1Compat" && docElemProp ||
                body && body[ "client" + name ] || docElemProp;

        // Get document width or height
        } else if ( elem.nodeType === 9 ) {
            // Either scroll[Width/Height] or offset[Width/Height], whichever is greater
            return Math.max(
                elem.documentElement["client" + name],
                elem.body["scroll" + name], elem.documentElement["scroll" + name],
                elem.body["offset" + name], elem.documentElement["offset" + name]
            );

nodeType === 9 表示 DOCUMENT_NODE : http://www.javascriptkit.com/domref/nodetype.shtml 所以没有 JQuery 代码解决方案应该是这样的:

var height = Math.max(
                    elem.documentElement.clientHeight,
                    elem.body.scrollHeight, elem.documentElement.scrollHeight,
                    elem.body.offsetHeight, elem.documentElement.offsetHeight)