مضاعفات ارتفاع مستند JavaScript

Question

يبدو أن مطوري Mozilla & IE قد غيروا في وقت واحد تنفيذ عناصر الارتفاع لتمثيل تطبيق الأوبرا ... وهو ما لم يكن لدي ما يقلقه من قبل.

var height = (document.height !== undefined) ? document.height : document.body.offsetHeight;

عندما يتم تنفيذها على مستند فارغ الآن ، يعود 0 كرقمة المستند. يتطلب تنفيذي معرفة منفذ عرض العميل الحقيقي للبناء ديناميكيًا. لا يزال Chrome و Safari يتصرفان كما اعتادوا.

Scrollheight ، و ClientHeight يتصرفون بالضبط.

لتعقيد Matters Document.hight و document.body.OffSetheight ، يأخذون الآن أيضًا الارتفاع الكامل للوثيقة في الاعتبار بدلاً من المنطقة القابلة للعرض فقط كما اعتادوا ... لقد جربت طريقة تباعد الجدول القديمة واستخدمت 2000 بكسل × 1 بكسل تم تعيين ارتفاع وثيقة الشفافة على 2000 الآن .... لا يزال يعمل كروم و Safari بشكل طبيعي كما هو متوقع ويعطي فقط الحجم القابل للعرض.

أنا يائس جدًا لإصلاح هذه المشكلة.

Answer 1

ارتفاع منفذ العرض ليس خاصية للوثيقة ، ولكن من النافذة التي تشاهدها. تحصل على ارتفاع منفذ العرض من window.innerHeight.

الأشياء مع document هناك حاجة فقط كاحتياطي لـ IE ، والذي لا يوفر window.inner أبعاد. IE (بشكل غير صحيح من الناحية الفنية) يجعل document.documentElement تمثل منفذ العرض ، حتى تتمكن من الحصول على الارتفاع من clientHeight, ، ما لم تكن في وضع المراوغات الذي (بشكل أكثر غير صحيحة) document.body تمثل منفذ العرض بدلاً من ذلك. ((document.height هو غير قياسي تماما. تجنبه.)

لذلك باختصار ، وافتراض أنك بحاجة إلى دعم وضع المراوغات (دعونا نأمل ألا تفعل):

var height= (
    'innerHeight' in window? window.innerHeight :
    document.compatMode!=='BackCompat'? document.documentElement.clientHeight :
    document.body.clientHeight
);

Answer 2

أنا استخدم هذا ، الذي حصلت عليه موقع جيمس بالدوسي:

function getDocHeight() {
    //utility function to find dimensions of page
    var D = document;
    return Math.max(
        Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
        Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
        Math.max(D.body.clientHeight, D.documentElement.clientHeight)
    );
}