لماذا ثلاثة محادثات
لماذا ثلاث محادثات؟ أحدهما لأن هذا موضوع تم الحديث عنه بشكل سيء حقًا، والآخر لأن Master Tai كتب هذه المقالة منذ n سنوات للحديث عن ارتفاع iframe التكيفي . سبب طرح هذا السؤال مرة أخرى هو أنني واجهت بالفعل جميع جوانب هذه المشكلة في المشاريع السابقة، ومن الضروري تلخيصها. آمل أن يكون هذا مفيدًا لك، يرجى تصحيحي إذا كان هناك أي أخطاء.
لن يزيد ارتفاع نفس المجال والصفحات الفرعية ديناميكيًا
هذا الموقف هو الأبسط. ما عليك سوى الحصول على الارتفاع الفعلي للصفحة الفرعية مباشرة من خلال البرنامج النصي وتعديل ارتفاع عنصر iframe. ولكن هناك نقطتان لا بد من الإشارة إليهما:
إذا كانت هناك عناصر موضوعة بشكل مطلق في الصفحة أو لم تكن هناك عناصر عائمة، يكون الوضع معقدًا بعض الشيء لدى المتصفحات المختلفة نتائج معالجة مختلفة، حتى المتصفحات التي تحتوي على Webkit kernel، يرجى الاطلاع على هذا العرض التوضيحي للحصول على التفاصيل. لذا، إما أن تقوم بالكشف عن المتصفح، أو تستخدم Math.max لحساب القيمة القصوى، أو تفكر في شيء آخر.
قد تكون الصفحة الموجودة في iframe كبيرة جدًا وتتطلب وقت تحميل طويل. عند حساب الارتفاع مباشرة، من المحتمل أنه لم يتم تنزيل الصفحة، وستكون هناك مشاكل في حساب الارتفاع. لذلك من الأفضل حساب الارتفاع في حدث التحميل الخاص بإطار iframe. تجدر الإشارة هنا أيضًا إلى أنه يجب استخدام نموذج حدث Microsoft obj.attachEvent لربط حدث التحميل ضمن IE. يمكن للمتصفحات الأخرى أيضًا استخدام obj.onload = function(){}.
(وظيفة(){
var _reSetIframe = function(){
إطار فار = document.getElementById("frame_content_parent")
يحاول {
فار فرامكونتنت = فرام.كونتنتويندوودوكومنت،
ارتفاع الجسم = Math.max
(frameContent.body.scrollHeight،
frameContent.documentElement.scrollHeight);
إذا (ارتفاع الجسم ! = الإطار. الارتفاع) {
frame.height = bodyHeight;
}
}
قبض (على سبيل المثال) {
ارتفاع الإطار = 1800؛
}
}
إذا (frame.addEventListener){
frame.addEventListener
("تحميل"، وظيفة () {setInterval (_reSetIframe، 200)؛}، خطأ)؛
}آخر{
frame.attachEvent("onload",function(){setInterval(_reSetIframe,200);});
}
})();
في نفس المجال، سيزداد ارتفاع الصفحات الفرعية ديناميكيًا، وقد يفشل البرنامج النصي تمامًا.
في المثال الثاني، يتم أخذ أخطاء البرنامج النصي في الاعتبار، ولكن إذا لم يتم تنفيذ البرنامج النصي على الإطلاق، فلن يتم عرض المحتوى الموجود في إطار iframe لأن ارتفاع إطار iframe ليس مرتفعًا بدرجة كافية. لهذا السبب، عادةً ما نقوم بتعيين ارتفاع كافٍ مسبقًا لتسهيل التحكم الأمامي، أعتقد أنه من الأفضل كتابته في ملف CSS، عند الحاجة إلى التعديل، ما عليك سوى تغيير CSS. هنا أقوم بتعيين المحدد { height:1800px }. تجدر الإشارة إلى أن الأنماط المكتوبة في ورقة الأنماط لا يمكن استرجاعها مباشرةً باستخدام العقدة.نمط[خاصية]. بالنسبة لنماذج ميكروسوفت، يجب استخدام العقدة.النمط الحالي[خاصية] (استطراد: نموذج IE المأساوي لا يدعم CSS الزائف). classs )، بالنسبة لنموذج W3C، استخدم window.getComputedStyle(node,null)[property] للحصول عليه. لقد استخدمت YUI مباشرة من أجل الراحة.
توجد مشكلة أخرى هنا. عند تعيين ارتفاع إطار iframe ليكون أكبر من ارتفاع الصفحة التي يحتوي عليها، يتعامل كل متصفح معه بشكل مختلف. على سبيل المثال، في Firefox، يجب حساب ارتفاع عنصر النص، ويكون ارتفاع عنصر html مساويًا لارتفاع إطار iframe. ومع ذلك، عندما تحتوي الصفحة على موضع مطلق وعناصر عائمة غير واضحة، لا يمكن ذلك يتم الحصول عليها من خلال عنصر الجسم ومن الواضح أن الطريقة الأولى مساوئ الطريقة أصغر. يرجى الاطلاع على هذا العرض التوضيحي للحصول على التفاصيل.