[英]Get page height in JS (Cross-Browser)
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.innerHeight
or document.documentElement.clientHeight
or document.body.clientHeight
or 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 );
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.shtml so 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)
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. 应该是实现它的一种好方法。
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. 希望这对您有所帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.