مقالة مقدمة من wulin.com (www.vevb.com): قد لا يواجه شخص ما هذه المشكلة بعد. دعونا أولاً نشرح الارتفاع التكيفي. يعني الارتفاع التكيفي الذي يسمى IFRAME أنه بناءً على جمال الواجهة والتفاعل ، يتم إخفاء الحدود وحدود الإطارات الإطارية ، مما يجعل من المستحيل أن نرى أنه معفاة. إذا كان iframe يتصل دائمًا بنفس صفحة الارتفاع الثابت ، فنحن بحاجة فقط إلى كتابة ارتفاع Iframe حتى الموت. و
ابحث عن ارتفاع Iframe Adaptive من خلال Google ، مع أكثر من نتائج 5W ، ابحث عن ارتفاع Iframe Adaptive ، مع نتائج أكثر من 2W.قرأت من خلال العشرات من المقالات في المقالات السابقة وحفرت عددًا كبيرًا من الطبعات. هناك ثلاث أو خمس مقالات أصلية. في هذه المقالات الأصلية ، يتحدثون بشكل أساسي فقط عن كيفية التكيف مع الأشياء الثابتة ، لكنهم لا يفكرون في كيفية القيام بمزامنة ديناميكية بعد تشغيل JS DOM. بالإضافة إلى ذلك ، من حيث التوافق ، كان البحث غير مكتمل أيضًا.
آمل أن أقوم ببعض الأبحاث المتعمقة في هذين الجانبين.
ربما لم يتصل شخص ما بهذه المشكلة بعد. دعنا نوضح أولاً ما هو الارتفاع التكيفي. يعني الارتفاع التكيفي الذي يسمى IFRAME أنه بناءً على جمال الواجهة والتفاعل ، يتم إخفاء الحدود وحدود الإطارات الإطارية ، مما يجعل من المستحيل أن نرى أنه معفاة. إذا كان iframe يتصل دائمًا بنفس صفحة الارتفاع الثابت ، فنحن بحاجة فقط إلى كتابة ارتفاع Iframe حتى الموت. إذا كان IFRAME يريد تبديل الصفحات ، أو تحتاج الصفحة المضمنة إلى إجراء عمليات DOM Dynamic ، فيجب على البرنامج مزامنة ارتفاع IFRAME والارتفاع الفعلي للصفحة المضمنة.
بالمناسبة ، إذا كان عليك استخدام iframe ، فسيؤدي ذلك إلى الكثير من المتاعب في التنمية الأمامية.
هناك ما يقرب من ممارستين تقليديتين:
الطريقة 1: بعد تحميل كل صفحة مضمنة عن طريق تحميل المحتوى الخاص بها ، قم بتنفيذ JS للحصول على ارتفاع هذه الصفحة ، ثم مزامنة ارتفاع IFRAME للصفحة الأصل.
الطريقة 2: قم بتنفيذ JS في حدث ONLOAD للصفحة الرئيسية IFRAME ، واحصل على محتوى الارتفاع للصفحة المضمنة ، ثم مزامنة الارتفاع.
من وجهة نظر صيانة الكود ، فإن الطريقة الثانية أفضل من الطريقة الأولى ، لأن الطريقة الأولى ، يجب أن تقدم كل صفحة مضمنة قطعة من نفس الرمز للقيام بذلك ، وتم إنشاء العديد من النسخ.
تتعامل كلتا الطريقتين فقط مع الأشياء الهادئة ، أي أنه يتم تنفيذهما فقط عند تحميل المحتوى. إذا كان JS يعمل على تغييرات الارتفاع الناتجة عن DOM ، فهي ليست مريحة للغاية.
إذا قمت بفاصل زمني في النافذة الرئيسية ، فحصل باستمرار على ارتفاع الصفحة المضمنة ، ثم تقوم بالتزامن ، هل هو مريح وحل مشكلة تشغيل JS في DOM؟ الجواب نعم.
الصفحة التجريبية: الصفحة الرئيسية iframe_a.html ، تحتوي على صفحات iframe_b.htm و iframe_c.html
مثال رمز الصفحة الرئيسية:
<iframe id = frame_content src = iframe_b.html scrolling = no framborder = 0> </frame> <script type = text/javaScript>
وظيفة reinitiframe () {
var iframe = document.getElementById (frame_content) ؛
يحاول{
iframe.height = iframe.contentwindow.document.documentElement.scrollheight ؛
} catch (ex) {}
}
window.setInterval (reinitiframe () ، 200) ؛
< /script> هل ستكون هناك أي مشكلة في الكفاءة؟
لقد أجريت الاختبار وفتحت 5 نوافذ (IE6 ، IE7 ، FF ، Opera ، Safari) لتنفيذ هذا الرمز ، والتي لن يكون لها أي تأثير على وحدة المعالجة المركزية ، وسيتم تعديلها حتى 2 مللي ثانية ، دون أي تأثير (يتم الحفاظ عليها بشكل أساسي عند شغل 0 ٪).
دعنا نتحدث عن قضايا التوافق في كل متصفح. كيفية الوصول إلى الارتفاع الصحيح. إنه يستحق بشكل أساسي مقارنة الهيئتين. لاحظ أن هذه المقالة تستخدم هذا doctype. يجب ألا تؤثر Doctypes المختلفة على النتيجة ، ولكن إذا لم تعلن صفحتك Doctype ، فأضفها أولاً.
<! doctype html public -// w3c // dtd html 4.01 // en> قم بإلحاح رمز الاختبار التالي إلى الصفحة الرئيسية لإخراج هاتين القيمتين ، مثال الرمز:
<viv> <butten> تحقق من الارتفاع </button> </div> <script type = text/javaScript>
وظيفة checkheight () {
var iframe = document.getElementById (frame_content) ؛
var bheight = iframe.contentwindow.document.body.scrollheight ؛
var dheight = iframe.contentwindow.document.documentElement.scrollheight ؛
تنبيه (bheight: + bheight + ، dheight: + dheight) ؛
}
يتم تحميل < /script> ، ويمكن تبديل طبقة مكونة تمامًا لتغيير ارتفاع الصفحة ديناميكيًا. إذا تم توسيع الطبقة ، فسيتم دعم ارتفاع الصفحة. مثال رمز:
<viv> <butting> تبديل تراكب </button>
< /div>
<النمط div = الارتفاع: 160 بكسل ؛ الموضع: النسبي>
<div id = نمط التراكب = الموضع: المطلق ؛ العرض: 280px ؛ الارتفاع: 280px ؛ العرض: لا شيء ؛> </div>
< /div>
<script type = text/javaScript>
وظيفة تبديل () {
var overlay = document.getElementById ('Overlay') ؛
overlay.style.display = (overlay.style.display == 'none')؟ "كتلة": "لا شيء" ؛
}
< /script> يسرد التالي قيم اختبار الكود أعلاه في كل متصفح:
(bheight = body.scrollheight ، dheight = documentelement.scrollheight ، Red = قيمة الخطأ ، الأخضر = القيمة الصحيحة)
/ يتم إخفاء الطبقة عند توسيع الطبقة
bheight dheight bheight dheight
IE6 184 184 184 303
IE7 184 184 184 303
FF 184 184 184 303
أوبرا 181 181 300 300
Safari 184 184 303 184
دعونا نتجاهل المشكلة التي تشير إلى أن الأوبرا أقل من 3 بكسل من غيرها ... يمكن ملاحظة أنه إذا لم يكن هناك وضع مطلق ، فإن القيمتين متساوية ، ولا يهم الشخص الذي تأخذه.
ولكن إذا كان هناك ، فإن أداء كل متصفح مختلف ، ومن الخطأ أن تأخذ أي قيمة بمفردها. ولكن يمكن العثور على قاعدة واحدة ، أي أن تأخذ قيمتين أقصى وتوافق مع كل متصفح. لذلك يجب تحويل رمز الصفحة الرئيسي الخاص بنا إلى هذا:
دالة reinitiframe () {var iframe = document.getElementById (frame_content) ؛
يحاول{
var bheight = iframe.contentwindow.document.body.scrollheight ؛
var dheight = iframe.contentwindow.document.documentElement.scrollheight ؛
var height = math.max (bheight ، dheight) ؛
iframe.height = الارتفاع ؛
} catch (ex) {}
}
window.setInterval (reinitiframe () ، 200) ؛ وبهذه الطريقة ، يتم حل مشكلة التوافق بشكل أساسي. بالمناسبة ، لا تؤثر الطبقة الموضوعة تمامًا على القيمة فحسب ، بل ستتسبب الطفو أيضًا في الفرق بين القيمتين.
إذا أظهرت العرض التوضيحي ، فستجد أنه في المتصفحات الأخرى ، باستثناء IE ، عندما يتم توسيع الطبقة ثم إخفاءها ، لا تزال قيمة الارتفاع التي تم الحصول عليها يتم الحفاظ عليها في الارتفاع الموسع 303 ، بدلاً من القيمة الحقيقية المختبئة مرة أخرى 184 ، مما يعني أنه لا يمكن أن يتقلص بعد النمو. يمكن أن تحدث هذه الظاهرة أيضًا عند التبديل بين الصفحات المتضمنة المختلفة. عند التبديل من صفحة عالية إلى صفحة منخفضة ، لا يزال الارتفاع الذي تم الحصول عليه هو نفس القيمة العالية.
يمكن تلخيصها على النحو التالي: عندما يكون ارتفاع نموذج iFrame أعلى من الارتفاع الفعلي للوثيقة ، يتم اعتبار الارتفاع كارتفاع النموذج ، وعندما يكون ارتفاع النموذج أقل من الارتفاع الفعلي للوثيقة ، يتم أخذ الارتفاع الفعلي للوثيقة على أنه الارتفاع الفعلي للوثيقة. لذلك ، من الضروري إيجاد طريقة لضبط الارتفاع على قيمة أقل من المستند الفعلي قبل مزامنتها. لذلك ، أضف onload = this.height = 100 ″ إلى iframe ، بحيث تكون الصفحة قصيرة بما يكفي عند التحميل ، ثم تزامن مع نفس الارتفاع.
يتم تحديد هذه القيمة في التطبيقات الفعلية وهي قصيرة بما فيه الكفاية ولكن ليست قصيرة للغاية ، وإلا سيكون هناك وزع واضحة في متصفحات مثل FF. عند تشغيل DOM ، لا يمكن مراقبة الصفحة الرئيسية ، بحيث يمكن تقليل الارتفاع بعد تشغيل DOM.
في أحد مشاريعي الفعلية ، لم أفعل هذا الشيء من حيث التكاليف والفوائد ، لأنه يتعين علي إدراج هذا الرمز في كل وظيفة DOM ، وهي مكلفة للغاية ، وفي الواقع ، ليس من المميت تقليص الطبقة أو عدم تقليصها. بما في ذلك في العرض التوضيحي ، لم يتم القيام بهذا الشيء. إذا كان للقارئ طريقة أفضل ، فيرجى إخبارنا بذلك.
فيما يلي رمز الصفحة الرئيسية النهائية:
<iframe id = frame_content src = iframe_b.html scrolling = no framborder = 0> </frame>
<script type = text/javaScript>
وظيفة reinitiframe () {
var iframe = document.getElementById (frame_content) ؛
يحاول{
var bheight = iframe.contentwindow.document.body.scrollheight ؛
var dheight = iframe.contentwindow.document.documentElement.scrollheight ؛
var height = math.max (bheight ، dheight) ؛
iframe.height = الارتفاع ؛
} catch (ex) {}
}
window.setInterval (reinitiframe () ، 200) ؛
< /script>