Bagaimana cara mendapatkan ketinggian seluruh dokumen dengan JavaScript?

333

Beberapa dokumen saya tidak bisa mendapatkan ketinggian dokumen (untuk memposisikan sesuatu benar-benar di bagian paling bawah). Selain itu, padding-bottom pada tampaknya tidak melakukan apa-apa pada halaman ini, tetapi lakukan pada halaman di mana ketinggian akan kembali. Poin dalam poin:

http://fandango.com
http://paperbackswap.com

Pada Fandango
jQuery $(document).height();mengembalikan nilai yang benar
document.heightmengembalikan 0
document.body.scrollHeightmengembalikan 0

Pada Paperback Swap: TypeError
jQuery $(document).height();: $(document)adalah null
document.heightmengembalikan nilai yang salah
document.body.scrollHeightmengembalikan nilai yang salah

Catatan: Saya memiliki izin level browser, jika ada trik di sana.

javascript Nic
sumber
5
$ (dokumen) adalah null karena situs itu tidak memuat jQuery ...
James
Hm, bisa saja bersumpah aku memeriksa sesuatu yang lain untuk mengonfirmasi jQuery telah terdaftar tetapi tidak seperti yang kulakukan, HA! Saya pikir pembakar memiliki jQuery yang dikemas ... hm, saya kira saya akan memeriksanya lalu apakah ini solusi.
Nic
4
firebug tidak memiliki paket
jQUery
Lihat Menemukan ukuran jendela browser . Ini memiliki tabel besar perilaku browser yang berbeda.
Oriol

Jawaban:

671

Ukuran dokumen adalah mimpi buruk kompatibilitas browser karena, meskipun semua browser mengekspos properti clientHeight dan scrollHeight, mereka tidak semua setuju bagaimana nilai-nilai dihitung.

Dulu ada rumus praktik terbaik yang kompleks di sekitar untuk bagaimana Anda menguji tinggi / lebar yang benar. Ini melibatkan penggunaan properti document.documentElement jika tersedia atau mundur pada properti dokumen dan sebagainya.

Cara paling sederhana untuk mendapatkan ketinggian yang benar adalah dengan mendapatkan semua nilai ketinggian ditemukan di dokumen, atau documentElement, dan gunakan yang tertinggi. Ini pada dasarnya adalah apa yang dilakukan jQuery:

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

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

Pengujian cepat dengan Firebug + jQuery bookmarklet mengembalikan tinggi yang benar untuk kedua halaman yang dikutip, dan begitu juga contoh kode.

Perhatikan bahwa pengujian ketinggian dokumen sebelum dokumen siap akan selalu menghasilkan 0. Juga, jika Anda memuat lebih banyak barang, atau pengguna mengubah ukuran jendela, Anda mungkin perlu menguji ulang. Gunakan onloadatau acara siap dokumen jika Anda memerlukan ini pada waktu buka, jika tidak, hanya menguji setiap kali Anda membutuhkan nomor tersebut.

Borgar
sumber
2
menilai solusi ini, karena ia bekerja ketika Anda menggunakan perpustakaan prototipe, dengan jQuery tidak ada masalah seperti
se_pavel
10
Ketika bekerja dengan iframe dan jquery, karena metode perhitungan ini, tinggi dokumen iframe akan selalu setidaknya ketinggian iframe sendiri. Ini penting untuk diperhatikan saat Anda ingin mengurangi ketinggian iframe agar sesuai dengan konten. Pertama-tama Anda harus mengatur ulang ketinggian iframe.
David Lay
3
Saya perlu menumbuhkan iframe dan mengecilkannya (aplikasi facebook) dan menemukan bahwa document.body.offsetHeight adalah pilihan terbaik bagi saya, secara akurat didukung oleh sebagian besar browser.
JeffG
1
Ini bagus meskipun dapat memberikan hasil yang salah jika dokumen tidak siap - yaitu, ketika digunakan dalam kode yang dihasilkan server ...
stuartdotnet
1
Menguji dokumen sebelum siap tidak akan berhasil. Ini tidak ada hubungannya dengan kode / dokumen yang dihasilkan melainkan bagaimana dokumen dimuat. Tes harus dijalankan setelah dokumen siap, dan saya sarankan menjalankannya hanya ketika dokumen dimuat penuh karena item yang tersisa dapat mempengaruhi ketinggian, juga mengubah ukuran browser.
Borgar
214

Ini adalah pertanyaan yang sangat lama, dan karenanya, memiliki banyak jawaban yang sudah ketinggalan zaman. Pada tahun 2020 semua browser utama telah mematuhi standar .

Jawaban untuk 2020:

document.body.scrollHeight

Sunting: di atas tidak mengambil margin pada <body>tag ke akun. Jika tubuh Anda memiliki margin, gunakan:

document.documentElement.scrollHeight
Marquizzo
sumber
hm - sekarang saya mengujinya dan berfungsi - saya tidak tahu mengapa - sangat baik :) - saya menghapus komentar saya sebelumnya
Kamil Kiełczewski
6
Mulai 2017 ini harus ditandai sebagai jawaban yang tepat untuk saya.
Joan
@ Joan Terserah poster asli untuk memutuskan :)
Marquizzo
Tidak berfungsi di hadapan margin. document.documentElement.getBoundingClientRect()bekerja lebih baik.
Torvin
3
Ada satu kesalahan dengan ini: Katakan misalnya bahwa ada <h1>elemen di awal <body>margin default, itu akan mendorong <body>elemen ke bawah tanpa cara untuk mendeteksinya. document.documentElement.scrollHeight(bukan document.body,scrollHeight) adalah cara paling akurat dalam melakukan sesuatu. Ini bekerja dengan kedua margin tubuh dan margin barang-barang di dalam tubuh mendorongnya ke bawah.
Ethan
29

Anda bahkan dapat menggunakan ini:

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 );
}

atau lebih jQuery (karena seperti yang Anda katakan jQuery tidak bohong) :)

Math.max($(document).height(), $(window).height())
Mimo
sumber
24

Perhitungan tinggi dokumen lengkap:

Untuk menjadi lebih umum dan menemukan ketinggian dokumen apa pun, Anda bisa menemukan Node DOM tertinggi pada halaman saat ini dengan rekursi sederhana:

;(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);
})();

Anda dapat mengujinya di situs sampel Anda ( http://fandango.com/ atau http://paperbackswap.com/ ) dengan menempelkan skrip ini ke Konsol DevTools.

CATATAN: ini bekerja dengan Iframes.

Nikmati!

Andrii Verbytskyi
sumber
2
Ini bekerja seperti pesona! Tidak ada jawaban lain di sini yang berfungsi untuk mendapatkan ketinggian penuh (termasuk area yang dapat digulir), mereka semua hanya mengembalikan ketinggian area yang terlihat.
Martin Kristiansson
Benar-benar luar biasa, tidak pernah memikirkan hal ini. Kurasa hanya satu yang bekerja di phantomjs.
MindlessRanger
6

"Metode jQuery" untuk menentukan ukuran dokumen - permintaan segalanya, mengambil nilai tertinggi, dan berharap yang terbaik - bekerja dalam banyak kasus, tetapi tidak semuanya .

Jika Anda benar - benar membutuhkan hasil anti peluru untuk ukuran dokumen, saya sarankan Anda menggunakan plugin jQuery.documentSize saya . Tidak seperti metode lain, ini benar-benar menguji dan mengevaluasi perilaku browser ketika dimuat dan, berdasarkan hasilnya, menanyakan properti yang tepat dari sana di luar.

Dampak dari pengujian satu kali ini terhadap kinerja sangat minim , dan plugin mengembalikan hasil yang tepat bahkan dalam skenario paling aneh - bukan karena saya katakan demikian, tetapi karena rangkaian pengujian besar yang dibuat secara otomatis benar-benar memverifikasi hal itu.

Karena plugin ini ditulis dalam vanilla Javascript, Anda dapat menggunakannya tanpa jQuery juga.

hashchange
sumber
5

Saya berbohong, jQuery mengembalikan nilai yang benar untuk kedua halaman $ (dokumen) .height (); ... mengapa saya pernah meragukannya?

Nic
sumber
1
Browser yang berbeda, bro.
jahrichie
4

Jawaban yang tepat untuk 2017 adalah:

document.documentElement.getBoundingClientRect().height

Berbeda document.body.scrollHeightdengan metode ini, akun ini menggunakan margin tubuh. Ini juga memberikan nilai ketinggian fraksional, yang dapat berguna dalam beberapa kasus

Torvin
sumber
1
Ini adalah hasil yang saya dapatkan ketika saya mencoba metode Anda pada halaman ini: i.imgur.com/0psVkIk.png Metode Anda mengembalikan sesuatu yang tampak seperti ketinggian jendela, sementara document.body.scrollHeightmencantumkan seluruh ketinggian yang dapat digulir, yang merupakan pertanyaan awal yang diajukan.
Marquizzo
2
@ Marquizzo itu karena halaman ini ada html { height: 100% }di css. Jadi API dengan benar mengembalikan tinggi yang dihitung sebenarnya . Coba hapus gaya ini dan tambahkan juga margin bodydan Anda akan melihat apa masalahnya dengan menggunakan document.body.scrollHeight.
Torvin
Ada satu kesalahan dengan ini: Katakan misalnya bahwa ada <h1>elemen di awal <body>margin default, itu akan mendorong <body>elemen ke bawah tanpa cara untuk mendeteksinya. document.documentElement.scrollHeight(bukan document.body,scrollHeight) adalah cara paling akurat dalam melakukan sesuatu.
Ethan
@Booligoosh tidak yakin apa yang Anda maksud. documentElement.scrollHeightmemberikan nilai yang salah dalam hal ini. documentElement.getBoundingClientRect().heightmemberikan yang benar. lihat ini: jsfiddle.net/fLpqjsxd
torvin
1
@torvin Fact tetap bahwa bukan hasil yang diinginkan dikembalikan oleh getBoundingClientRect().height. Itu akan teralihkan, sementara 3 (tiga) metode lain tidak teralihkan. Termasuk yang Anda sebut lebih rendah dari itu. Dan Anda bersikeras melakukannya dengan menyarankan untuk menghapus 100% dari tinggi html halaman ini, dan menambahkan margin untuk itu. Apa gunanya ? Terima saja itu getBoundingClientRect().heightjuga bukan bukti-peluru.
Rob Waa
2

Untuk mendapatkan lebar dalam lintas browser / cara perangkat gunakan:

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

    return actualWidth;
}
pengguna937284
sumber
11
kita berbicara tentang tinggi badan. tidak lebar.
Yash
0

Bagi siapa pun yang kesulitan menggulir halaman berdasarkan permintaan, menggunakan deteksi fitur, saya telah membuat hack ini untuk mendeteksi fitur mana yang akan digunakan dalam gulir animasi.

Masalahnya adalah keduanya document.body.scrollTopdan document.documentElementselalu kembalitrue di semua browser.

Namun Anda hanya dapat benar-benar menggulir dokumen dengan salah satu atau yang lain. d.body.scrollTopuntuk Safari dan document.documentElementuntuk semua lainnya menurut w3schools (lihat contoh)

element.scrollTop berfungsi di semua browser, tidak demikian untuk level dokumen.

    // 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
sumber
-1

gunakan kode tiup untuk menghitung ketinggian + gulir

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

var height = dif + document.documentElement.scrollHeight +"px";
ali bagheri
sumber
-1

Kode peramban silang di bawah ini mengevaluasi semua ketinggian yang mungkin dari elemen tubuh dan html dan mengembalikan maks yang ditemukan:

            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

Contoh kerja:

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 />
Luaskan cuplikan

willy wonka
sumber
Tolong jelaskan motivasi dalam hal downvoting sehingga saya dapat memperbaiki intinya. Terima kasih banyak
willka wonka
-4

Saya tidak tahu tentang menentukan ketinggian sekarang, tetapi Anda dapat menggunakan ini untuk meletakkan sesuatu di bagian bawah:

<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
sumber
1
Percayalah, saya sudah kehabisan sumber daya HTML dan CSS yang satu ini. Tidak dapat menjelaskannya tetapi Anda akan melihat masalah jika Anda mencoba ini di situs tersebut.
Nic
-4

Tambahkan Referensi dengan benar

Dalam kasus saya, saya menggunakan halaman ASCX dan halaman aspx yang berisi kontrol ascx tidak menggunakan referensi dengan benar. Saya baru saja menempelkan kode berikut dan berhasil:

<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>
Omong kosong
sumber