Nhận chiều cao trang bằng JS (Cross-Browser)

Question

Cách tốt nhất để có được chiều cao trang thực tế (không phải cửa sổ) trong JS là tương thích giữa các trình duyệt?

Tôi đã nhìn thấy một vài cách nhưng tất cả đều trở về giá trị khác nhau ...

self.innerHeight hoặc document.documentElement.clientHeight hoặc document.body.clientHeight hay cái gì khác?

Một cách để làm việc đó mà dường như để làm việc là:

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

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

Answer 1

Hãy thử điều này mà không cần 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; 
} 

Hy vọng điều này sẽ giúp bạn.

Answer 2

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

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

Nên là một cách tốt đẹp để thực hiện điều đó.

Answer 3

Trang/Chiều cao tài liệu hiện đang chịu sự triển khai của nhà cung cấp (IE/Moz/Apple/...) và không có trình duyệt chéo kết quả chuẩn và nhất quán.

Nhìn vào phương thức 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 bình DOCUMENT_NODE: http://www.javascriptkit.com/domref/nodetype.shtml nên không có mã số giải pháp JQuery nên trông giống như:

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