Bagaimanakah Saya Boleh Tentukan Ketinggian Dokumen Web dalam JavaScript Merentasi Pelayar Berbeza?

Menentukan Ketinggian Dokumen dengan JavaScript: Menyingkap Cabaran Merentas Pelayar

Dalam dokumen web tertentu, mendapatkan semula ketinggian menggunakan kaedah standard menimbulkan cabaran. Isu ini ditambah lagi dengan ketidakberkesanan melapik bahagian bawah dokumen. Ambil, sebagai contoh, tapak web fandango.com dan paperbackswap.com:

Di fandango.com:

• jQuery's $(document).height() memberikan nilai yang betul.
• dokumen.ketinggian dikembalikan 0.
• document.body.scrollHeight mengembalikan 0.

Pada paperbackswap.com:

• jQuery's $(document).height() melontarkan TypeError: $(document) ialah null.
• document.height mengembalikan nilai yang salah.
• document.body.scrollHeight mengembalikan nilai yang salah.

Pengiraan ketinggian dokumen merentas penyemak imbas adalah mimpi ngeri keserasian . Walaupun semua penyemak imbas menawarkan sifat clientHeight dan scrollHeight, ia berbeza dalam kaedah pengiraan mereka.

Amalan Terbaik untuk Mendapatkan Ketinggian Tepat
Cara yang paling boleh dipercayai untuk mendapatkan ketinggian dokumen yang betul ialah mengumpulkan semua nilai ketinggian daripada dokumen atau documentElement dan gunakan yang tertinggi. Pendekatan ini pada asasnya digunakan oleh jQuery:

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

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

Kaedah ini menghasilkan ketinggian yang betul untuk fandango.com dan paperbackswap.com.

Awas
Percubaan untuk mendapatkan semula ketinggian dokumen sebelum dokumen dimuatkan sepenuhnya akan sentiasa menghasilkan 0. Selain itu, pemuatan kandungan dinamik atau tetingkap mengubah saiz mungkin memerlukan ujian semula. Pantau acara ini dan uji dengan sewajarnya.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Tentukan Ketinggian Dokumen Web dalam JavaScript Merentasi Pelayar Berbeza?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!