Bagaimana untuk Mengira Ketinggian Dokumen dengan Tepat dalam JavaScript Merentasi Pelayar?

Mengira Ketinggian Dokumen dalam JavaScript: Menyelesaikan Isu Keserasian

Menentukan ketinggian dokumen adalah penting untuk pelbagai senario, seperti elemen kedudukan secara mutlak . Walau bagaimanapun, dokumen tertentu menimbulkan cabaran, mengakibatkan percanggahan atau nilai yang salah apabila menggunakan kaedah standard.

Dua kes bermasalah ialah Fandango dan Paperback Swap:

• Pada Fandango, $(document). height() mengembalikan nilai yang betul, manakala document.height dan document.body.scrollHeight adalah kedua-duanya 0.
• Pada Paperback Swap, $(document).height() melemparkan ralat dan kedua-dua document.height dan document.body.scrollHeight mengembalikan nilai yang salah.

Sebabnya kerana ketidakkonsistenan ini terletak pada hakikat bahawa pelayar berbeza mengira saiz dokumen secara berbeza. Untuk menangani perkara ini, adalah perlu untuk menggunakan formula berikut:

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

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

Pendekatan ini memastikan bahawa nilai tertinggi untuk ketinggian diperolehi, tanpa mengira pelayar yang digunakan.

Adalah penting untuk ambil perhatian bahawa menguji ketinggian dokumen sebelum ia dimuatkan sepenuhnya akan sentiasa menghasilkan nilai 0. Selain itu, sebarang perubahan seterusnya pada dokumen atau saiz semula tetingkap mungkin memerlukan mengira semula ketinggian. Untuk mengendalikan senario sedemikian, gunakan acara onload atau sedia dokumen.

Atas ialah kandungan terperinci Bagaimana untuk Mengira Ketinggian Dokumen dengan Tepat dalam JavaScript Merentasi Pelayar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!