javascript 在 JS 中获取页面高度（跨浏览器）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9430070/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get page height in JS (Cross-Browser)
提问by Boris Bachovski
What is the best way to get the actual page (not window) height in JS that is cross-browser compatible?
在跨浏览器兼容的 JS 中获取实际页面（不是窗口）高度的最佳方法是什么？
I've seen a few ways but they all return different values...
我见过几种方法，但它们都返回不同的值......
self.innerHeightor
document.documentElement.clientHeightor
document.body.clientHeightor something else?
self.innerHeight或
document.documentElement.clientHeight或
document.body.clientHeight或别的什么？
One way of doing it which seems to work is :
一种似乎有效的方法是：
var body = document.body,
html = document.documentElement;
var height = Math.max( body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight );
回答by Krilivye
Page/Document height is currently subject to vendor (IE/Moz/Apple/...) implementation and does not have a standard and consistent result cross-browser.
页面/文档高度目前受制于供应商 (IE/Moz/Apple/...) 实施，并且没有标准且一致的跨浏览器结果。
Looking at JQuery .height() method;
查看 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 mean DOCUMENT_NODE : http://www.javascriptkit.com/domref/nodetype.shtmlso no JQuery code solution should looks like:
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)
回答by Jonas
var width = window.innerWidth ||
html.clientWidth ||
body.clientWidth ||
screen.availWidth;
var height = window.innerHeight ||
html.clientHeight ||
body.clientHeight ||
screen.availHeight;
Should be a nice & clean way to accomplish it.
应该是完成它的一种漂亮而干净的方式。
回答by Amar Palsapure
Try this without jQuery
不用 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;
}
Hope this helps you.
希望这对你有帮助。
