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

页面/文档高度目前受供应商（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)

Answer 2

var width = window.innerWidth ||
            html.clientWidth  ||
            body.clientWidth  ||
            screen.availWidth;

var height = window.innerHeight ||
             html.clientHeight  ||
             body.clientHeight  ||
             screen.availHeight;

应该是一个不错的＆amp;干净的方式来实现它。

Answer 3

不用jQuery试试这个

//Get height
var myWidth = 0, myHeight = 0;
if (typeof (window.innerWidth) == 'number') {
    myWidth = window.innerWidth; 
    myHeight = window.innerHeight;
} else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
    myWidth = document.documentElement.clientWidth; 
    myHeight = document.documentElement.clientHeight;
} else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
   myWidth = document.body.clientWidth; 
   myHeight = document.body.clientHeight;
}

希望这会对你有所帮助。

在JS中获取页面高度（跨浏览器）

3 个答案: