Làm cách nào để lấy chiều cao của toàn bộ tài liệu bằng JavaScript?

333

Một số tài liệu tôi không thể lấy chiều cao của tài liệu (để đặt một cái gì đó hoàn toàn ở dưới cùng). Ngoài ra, phần đệm ở dưới dường như không làm gì trên các trang này, nhưng thực hiện trên các trang có chiều cao sẽ trở lại. Trường hợp tại điểm:

http://fandango.com
http://apersbacksw.com

Trên Fandango
jQuery $(document).height();trả về giá trị đúng
document.heighttrả về 0
document.body.scrollHeighttrả về 0

Trên Hoán đổi bìa mềm: TypeError
của jQuery $(document).height();: $(document)là null
document.heighttrả về giá trị không chính xác
document.body.scrollHeighttrả về giá trị không chính xác

Lưu ý: Tôi có quyền cấp trình duyệt, nếu có một số mẹo ở đó.

javascript

— Nic
nguồn

5

$ (tài liệu) là null vì trang web đó không tải jQuery ...

— James

Hừm, có thể đã thề rằng tôi đã kiểm tra một cái gì đó khác để xác nhận jQuery đã được đăng ký nhưng nó không giống như tôi đã làm, HA! Tôi nghĩ rằng con bọ lửa đã đóng gói jQuery ... hm, tôi đoán tôi sẽ kiểm tra điều này sau đó nếu đó là một giải pháp.

— Nic

4

con bọ lửa không có gói

— JQUery

Xem Tìm kích thước của cửa sổ trình duyệt . Nó có một bảng tuyệt vời về các hành vi của các trình duyệt khác nhau.

— Oriol

670

Kích thước tài liệu là một cơn ác mộng tương thích trình duyệt bởi vì, mặc dù tất cả các trình duyệt hiển thị các thuộc tính clientHeight và scrollHeight, tất cả chúng đều không đồng ý cách tính các giá trị.

Đã từng có một công thức thực hành tốt nhất phức tạp xung quanh cách bạn kiểm tra chiều cao / chiều rộng chính xác. Điều này liên quan đến việc sử dụng các thuộc tính document.documentE bổ sung nếu có hoặc quay trở lại các thuộc tính tài liệu, v.v.

Cách đơn giản nhất để có được chiều cao chính xác là lấy tất cả các giá trị chiều cao được tìm thấy trên tài liệu hoặc documentEuity và sử dụng giá trị cao nhất. Về cơ bản, đây là những gì jQuery làm:

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

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

Một thử nghiệm nhanh với bookmarklet Firebird + jQuery trả về chiều cao chính xác cho cả hai trang được trích dẫn và ví dụ mã cũng vậy.

Lưu ý rằng việc kiểm tra chiều cao của tài liệu trước khi tài liệu sẵn sàng sẽ luôn dẫn đến 0. Ngoài ra, nếu bạn tải thêm nội dung hoặc người dùng thay đổi kích thước cửa sổ, bạn có thể cần kiểm tra lại. Sử dụng onloadhoặc một sự kiện sẵn sàng cho tài liệu nếu bạn cần điều này khi tải, nếu không thì chỉ cần kiểm tra bất cứ khi nào bạn cần số.

— Nhà thờ
nguồn

2

đánh giá giải pháp này, bởi vì nó hoạt động khi bạn đang sử dụng thư viện nguyên mẫu, với jQuery không có vấn đề nào như vậy

— se_pavel

10

Khi làm việc với iframe và jquery, do phương pháp tính toán này, chiều cao tài liệu của iframe sẽ luôn ít nhất là chiều cao của iframe. Điều quan trọng cần lưu ý khi bạn muốn giảm chiều cao của iframe để phù hợp với nội dung. Trước tiên, bạn phải đặt lại chiều cao của iframe.

— David Lay

3

Tôi có nhu cầu phát triển iframe và thu nhỏ nó (ứng dụng facebook) và thấy rằng document.body.offsetHeight là lựa chọn tốt nhất cho tôi, được hầu hết các trình duyệt hỗ trợ chính xác.

— JeffG

1

Điều này thật tuyệt mặc dù có thể cho kết quả không chính xác nếu tài liệu chưa sẵn sàng - tức là khi được sử dụng trong mã do máy chủ tạo ...

— stuartdotnet

1

Kiểm tra tài liệu trước khi nó sẵn sàng sẽ không hoạt động. Điều này không liên quan gì đến mã / tài liệu được tạo mà là cách tài liệu được tải. Kiểm tra phải chạy sau khi tài liệu đã sẵn sàng và tôi khuyên bạn chỉ nên chạy nó khi tài liệu được tải đầy đủ vì các mục còn lại có thể ảnh hưởng đến chiều cao, cũng thay đổi kích thước trình duyệt.

— Borgar

212

Đây là một câu hỏi thực sự cũ, và do đó, có nhiều câu trả lời lỗi thời. Kể từ năm 2020, tất cả các trình duyệt chính đã tuân thủ tiêu chuẩn .

Trả lời năm 2020:

document.body.scrollHeight

Chỉnh sửa: ở trên không có lợi nhuận trên <body>thẻ vào tài khoản. Nếu cơ thể bạn có lề, hãy sử dụng:

document.documentElement.scrollHeight

— Marquizzo
nguồn

hm - bây giờ tôi kiểm tra nó và nó hoạt động - tôi không biết tại sao - rất ok :) - tôi xóa bình luận trước đây của tôi

— Kamil Kiełczewski

6

Kể từ năm 2017, điều này nên được đánh dấu là câu trả lời đúng cho tôi.

— Joan

@Joan Điều đó tùy thuộc vào poster ban đầu để quyết định :)

— Marquizzo 7/07/17

Không hoạt động với sự có mặt của lề. document.documentElement.getBoundingClientRect()làm việc tốt hơn

— torvin

3

Có một lỗi với điều này: Ví dụ: có một <h1>phần tử ở đầu <body>với lề mặc định của nó, nó sẽ đẩy <body>phần tử xuống mà không có cách nào để phát hiện ra nó. document.documentElement.scrollHeight(không document.body,scrollHeight) là cách làm chính xác nhất. Điều này hoạt động với cả lề cơ thể và lề của các thứ bên trong cơ thể đẩy nó xuống dưới.

— Ethan

29

Bạn thậm chí có thể sử dụng này:

var B = document.body,
    H = document.documentElement,
    height

if (typeof document.height !== 'undefined') {
    height = document.height // For webkit browsers
} else {
    height = Math.max( B.scrollHeight, B.offsetHeight,H.clientHeight, H.scrollHeight, H.offsetHeight );
}

hoặc theo cách khác của jQuery (vì như bạn đã nói jQuery không nói dối) :)

Math.max($(document).height(), $(window).height())

— Mimo
nguồn

24

Tính chiều cao tài liệu đầy đủ:

Để chung chung hơn và tìm chiều cao của bất kỳ tài liệu nào, bạn chỉ cần tìm Nút Node cao nhất trên trang hiện tại với một đệ quy đơn giản:

;(function() {
    var pageHeight = 0;

    function findHighestNode(nodesList) {
        for (var i = nodesList.length - 1; i >= 0; i--) {
            if (nodesList[i].scrollHeight && nodesList[i].clientHeight) {
                var elHeight = Math.max(nodesList[i].scrollHeight, nodesList[i].clientHeight);
                pageHeight = Math.max(elHeight, pageHeight);
            }
            if (nodesList[i].childNodes.length) findHighestNode(nodesList[i].childNodes);
        }
    }

    findHighestNode(document.documentElement.childNodes);

    // The entire page height is found
    console.log('Page height is', pageHeight);
})();

Bạn có thể Kiểm tra nó trên các trang web mẫu của mình ( http://fandango.com/ hoặc http://apersbackswap.com/ ) bằng cách dán tập lệnh này vào Bảng điều khiển DevTools.

LƯU Ý: nó đang làm việc với Iframes.

Thưởng thức!

— Verbytskyi
nguồn

2

Điều này làm việc như một nét duyên dáng! Không có câu trả lời nào khác ở đây hoạt động để có được chiều cao đầy đủ (bao gồm cả vùng có thể cuộn), tất cả chúng chỉ trả về chiều cao của vùng nhìn thấy được.

— Martin Kristiansson

Thực sự đặc biệt, không bao giờ nghĩ về điều này. Tôi chỉ có một người làm việc trong ph Phantomjs.

— MindlessRanger

6

"Phương pháp jQuery" xác định kích thước tài liệu - truy vấn mọi thứ, lấy giá trị cao nhất và hy vọng điều tốt nhất - hoạt động trong hầu hết các trường hợp, nhưng không phải trong tất cả các trường hợp .

Nếu bạn thực sự cần kết quả chống đạn cho kích thước tài liệu, tôi khuyên bạn nên sử dụng plugin jQuery.documentSize của tôi . Không giống như các phương thức khác, nó thực sự kiểm tra và đánh giá hành vi của trình duyệt khi được tải và dựa trên kết quả, truy vấn đúng thuộc tính từ đó trở đi.

Tác động của thử nghiệm một lần này đến hiệu suất là tối thiểu và plugin trả về kết quả đúng trong cả những tình huống kỳ lạ nhất - không phải vì tôi nói vậy, mà bởi vì một bộ thử nghiệm tự động tạo ra khổng lồ thực sự xác minh rằng nó thực sự.

Vì plugin được viết bằng vanilla Javascript, bạn cũng có thể sử dụng nó mà không cần jQuery .

— trao đổi
nguồn

5

Tôi đã nói dối, jQuery trả về giá trị chính xác cho cả hai trang $ (tài liệu) .height (); ... tại sao tôi lại nghi ngờ điều đó?

— Nic
nguồn

1

Trình duyệt khác nhau bro.

— jahrichie

4

Câu trả lời thích hợp cho năm 2017 là:

document.documentElement.getBoundingClientRect().height

Không giống như document.body.scrollHeightphương pháp này chiếm tỷ lệ cơ thể. Nó cũng cho giá trị chiều cao phân đoạn, có thể hữu ích trong một số trường hợp

— torvin
nguồn

1

Đây là những kết quả tôi nhận được khi tôi thử phương pháp của bạn trên trang này: i.imgur.com/0psVkIk.png Phương thức của bạn trả về một cái gì đó trông giống như chiều cao cửa sổ, trong khi document.body.scrollHeightliệt kê toàn bộ chiều cao có thể cuộn, đó là những gì câu hỏi ban đầu được hỏi.

— Marquizzo

2

@Marquizzo đó là vì trang này có html { height: 100% }trong css. Vì vậy, API trả về chính xác chiều cao tính toán thực sự . Hãy thử loại bỏ phong cách này và cũng thêm các lề vào bodyvà bạn sẽ thấy vấn đề với việc sử dụng document.body.scrollHeight.

— torvin

Có một lỗi với điều này: Ví dụ: có một <h1>phần tử ở đầu <body>với lề mặc định của nó, nó sẽ đẩy <body>phần tử xuống mà không có cách nào để phát hiện ra nó. document.documentElement.scrollHeight(không document.body,scrollHeight) là cách làm chính xác nhất.

— Ethan

@Booligoosh không chắc ý của bạn là gì. documentElement.scrollHeightđưa ra một giá trị sai trong trường hợp này. documentElement.getBoundingClientRect().heightđưa ra một cái đúng kiểm tra cái này: jsfiddle.net/fLpqjsxd

— torvin

1

@torvin Fact vẫn không cho rằng kết quả dự định được trả về getBoundingClientRect().height. Nó bị bỏ qua, trong khi 3 (ba) phương thức khác không bị đi lạc hướng. Bao gồm một cái mà bạn đề cập là kém hơn nó. Và bạn khăng khăng làm như vậy bằng cách đề xuất xóa 100% khỏi chiều cao html của trang này và thêm lề cho nó. Vấn đề ở đây là gì ? Chỉ cần chấp nhận rằng đó getBoundingClientRect().heightcũng không phải là chống đạn.

— Rob Waa

2

Để có được chiều rộng theo cách sử dụng trình duyệt / thiết bị chéo:

function getActualWidth() {
    var actualWidth = window.innerWidth ||
                      document.documentElement.clientWidth ||
                      document.body.clientWidth ||
                      document.body.offsetWidth;

    return actualWidth;
}

— người dùng937284
nguồn

11

chúng ta đang nói về chiều cao không chiều rộng.

— Yash

0

Đối với bất kỳ ai gặp khó khăn khi cuộn một trang theo yêu cầu, sử dụng tính năng phát hiện, tôi đã nghĩ ra cách hack này để phát hiện tính năng nào sẽ sử dụng trong cuộn hoạt hình.

Vấn đề là cả hai document.body.scrollTopvà document.documentElementluôn được trả lại truetrong tất cả các trình duyệt.

Tuy nhiên, bạn chỉ có thể thực sự cuộn một tài liệu bằng cái này hoặc cái kia. d.body.scrollTopcho Safari và document.documentElementcho tất cả những người khác theo w3schools (xem ví dụ)

element.scrollTop hoạt động trong tất cả các trình duyệt, không phải như vậy đối với cấp độ tài liệu.

    // get and test orig scroll pos in Saf and similar 
    var ORG = d.body.scrollTop; 

    // increment by 1 pixel
    d.body.scrollTop += 1;

    // get new scroll pos in Saf and similar 
    var NEW = d.body.scrollTop;

    if(ORG == NEW){
        // no change, try scroll up instead
        ORG = d.body.scrollTop;
        d.body.scrollTop -= 1;
        NEW = d.body.scrollTop;

        if(ORG == NEW){
            // still no change, use document.documentElement
            cont = dd;
        } else {
            // we measured movement, use document.body
            cont = d.body;
        }
    } else {
        // we measured movement, use document.body
        cont = d.body;
    }

— YK
nguồn

-1

sử dụng mã thổi để tính chiều cao + cuộn

var dif = document.documentElement.scrollHeight - document.documentElement.clientHeight;

var height = dif + document.documentElement.scrollHeight +"px";

— ali bagheri
nguồn

-1

Mã trình duyệt chéo này bên dưới đánh giá tất cả các độ cao có thể có của phần tử cơ thể và html và trả về mức tối đa được tìm thấy:

            var body = document.body;
            var html = document.documentElement;
            var bodyH = Math.max(body.scrollHeight, body.offsetHeight, body.getBoundingClientRect().height, html.clientHeight, html.scrollHeight, html.offsetHeight); // The max height of the body

Một ví dụ làm việc:

function getHeight()
{
  var body = document.body;
  var html = document.documentElement; 
  var bodyH = Math.max(body.scrollHeight, body.offsetHeight, body.getBoundingClientRect().height, html.clientHeight, html.scrollHeight, html.offsetHeight);
  return bodyH;
}

document.getElementById('height').innerText = getHeight();

body,html
{
  height: 3000px;
}

#posbtm
{
  bottom: 0;
  position: fixed;
  background-color: Yellow;
}

<div id="posbtm">The max Height of this document is: <span id="height"></span> px</div>

example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />
example document body content example document body content example document body content example document body content <br />

Mở rộng đoạn trích

— wonka willy
nguồn

Vui lòng giải thích động lực trong trường hợp hạ cấp để tôi có thể sửa điểm. Cảm ơn rất nhiều

— willy wonka

-4

Tôi không biết về việc xác định chiều cao ngay bây giờ, nhưng bạn có thể sử dụng điều này để đặt một cái gì đó ở phía dưới:

<html>
<head>
<title>CSS bottom test</title>
<style>
.bottom {
  position: absolute;
  bottom: 1em;
  left: 1em;
}
</style>
</head>

<body>

<p>regular body stuff.</p>

<div class='bottom'>on the bottom</div>

</body>
</html>

— jedihawk
nguồn

1

Tin tôi đi, tôi đã cạn kiệt tài nguyên HTML và CSS trên cái này. Không thể giải thích nhưng bạn sẽ thấy vấn đề nếu bạn thử điều này trên các trang web đó.

— Nic

-4

Thêm tài liệu tham khảo đúng cách

Trong trường hợp của tôi, tôi đã sử dụng trang ASCX và trang aspx chứa điều khiển ascx không sử dụng đúng các tham chiếu. Tôi chỉ cần dán đoạn mã sau và nó hoạt động:

<script src="../js/jquery-1.3.2-vsdoc.js" type="text/javascript"></script>
<script src="../js/jquery-1.3.2.js" type="text/javascript"></script>
<script src="../js/jquery-1.5.1.js" type="text/javascript"></script>

— Tosh
nguồn