تصف هذه المقالة طريقة JS لتنفيذ ارتفاع IFRAME التكيفي. شاركه للرجوع إليه ، على النحو التالي:
لقد شعرت بالقلق من المستوى العالي من القدرة على التكيف مع iframes من قبل ، ويبدو أن الكثير من رمز JS غبي في FF. في وقت لاحق ، تم استرداد الرمز التالي أخيرًا من قبل آلاف أكوام الكود التي تدعي أنها متوافقة مع FF. لقد استخدمته ، إنه سهل الاستخدام حقًا. خاصة بالنسبة للأشخاص مثلي الذين لديهم مستوى منخفض من JS (أنا محرج للغاية) هذا الرمز بسيط وسهل الفهم ومريح للتعديل. ما عليك سوى نسخ والصق الرمز التالي في علامة <Body> للصفحة حيث يوجد iFrame وتعديل اسم المعرف (لاحظ أن هناك مكانين يتم تعديلهما ، ويتم شرح الموقع في الكود).
تحية للأصدقاء الذين أنشأوا هذا الرمز.
الخطوة 1: أدخل رمز JS التالي ضمن علامة <Body>
<scriptLanguage = "javaScript"> function adlectFramesize () {var frm = document.getElementById ("iframe1") ؛ // استبدل iframe1 باسم المعرف الخاص بك var subweb = document.frames؟ document.frames ["iframe1"]. المستند: frm.ContentDocument ؛ if (frm! = null && subweb! = null) {frm.style.height = "0px" ؛ // تهيئةه ، وإلا فإن ارتفاع الصفحة الكبير سيتم الاحتفاظ به frm.style.height = subweb.documentElement.scrollheight+"px" ؛ frm.style.width = subweb.documentElement.ScrollWidth+"px" ؛ subweb.body.style.overflowx = "auto" ؛ subweb.body.style.overflowy = "Auto" ؛ }} </script>الخطوة 2: إضافة id = "iframe1" onload = "addframesize ()" إلى علامة iframe
على سبيل المثال: يكون رمز كود النسخ كما يلي: <iframe id = "iframe1" onload = "addframesize ()" scrolling = "no" src = "iframe1.html" width = "100 ٪" target = "_ self
هذا الرمز له عيب صغير ، أي أن المسافة بين المحتوى في iframe والحدود الخارجية (في حالة وجود الحدود الخارجية) صغيرة بعض الشيء ، بحيث يمكنك ضبطها بشكل مناسب بنفسك ؛ بالإضافة إلى ذلك ، لم يتم اختبار أي متصفحات أخرى باستثناء IE6.0 أو أعلى و FF ، ولم يتم العثور على عيوب أخرى. إذا وجدت مشاكل أثناء الاستخدام أو لديك حل أفضل ، فيرجى مشاركتها.
إذا كانت صفحة iframe تحتوي على صفحة محملة AJAX أو إضافة محتوى ديناميكيًا من خلال JS ، فيمكنك إضافة الطرق التالية:
1: أضف المحتوى التالي إلى الصفحة الفرعية
// تعديل وظيفة عنوان النافذة الأصل changeHeight () {window.top.location.hash = "#height =" + $ (document) .height () ؛}قم بتعديل جزء DOM للاتصال بهذه الطريقة
2: أضف الصفحة الأصل
// ارتفاع var iframe = document.getElementById ("iframe1") ؛ وظيفة iframeheight () {var hash = window.location.hash.slice (1) ، h ؛ if (hash && /Height=/.test(hash)) {h = hash.replace ("height =" ، "") ؛ iframe.style.height = h+"px" ؛ window.location.hash = "#temp" ؛ // منع الارتفاع من دون تغيير عند النقر فوق صفحات أخرى} setTimeOut (iframeheight ، 100) ؛} iframeheight () ؛لمزيد من المعلومات حول المحتوى المتعلق بـ JavaScript ، يرجى مراجعة موضوعات هذا الموقع: "ملخص تقنيات تشغيل JSON في JavaScript" ، "ملخص لتأثيرات تبديل JavaScript وتقنيات" ، ملخص لـ JavaScript Sevonsmes Techniques ". هياكل البيانات وتقنيات الخوارزمية "،" ملخص خوارزميات وتقنيات JavaScript Traversal "و" ملخص استخدام العمليات الرياضية Javascript "
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.