تتمثل وظيفة عنصر iframe في تضمين مستند داخل مستند وإنشاء إطار عائم. كثير من الناس لا يفهمون تمامًا كيفية التحكم في iframe، وما زالوا في حالة غامضة من الفهم. ملاحظتان على iframe، ifr هو المعرف وقيمة NAME لإطار iframe موجود: هنا اقتباس: إذا كنت تريد فقط تغيير src أو الحد الخاص بإطار iframe، والتمرير والسمات الأخرى (التي تختلف عن مفهوم الخاصية، فلا يمكن كتابة الخاصية في علامات، مثلscrollHeight، وinnerHTML، وما إلى ذلك)، فستحتاج إلى استخدام الطريقة الأولى . إذا كنت ترغب في الحصول على صفحة iframe (وليس iframe نفسه)، فستحتاج إلى استخدام الطريقة الثانية، لأنها تحصل على نموذج DOM كامل، على سبيل المثال، إذا كنت ترغب في الحصول على محتوى document.body الخاص بـ iframe، يمكنك فقط استخدام الطريقة الثانية. لاحظ أيضًا أنه إذا قمت باستدعاء نموذج DOM الخاص بـ iframe عندما لا يتم تحميل صفحة iframe بالكامل، فسيحدث خطأ جسيم، لذلك تحتاج إلى إعداد وضع متسامح مع الأخطاء. فيما يلي أمثلة، أحدهما aa.htm والآخر bb.htm! aa.htm الكود: فيما يلي مقتطف مقتبس: bb.htm
document.getElementById("ifr");
window.frames["ifr"];
إذا كنت تريد استخدام الوظيفة في iframe، فيجب أن يمر المتغير بالطريقة الثانية لأنها تأخذ نموذج DOM كاملاً (لا أعرف ما إذا كان هذا صحيحًا).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<الرأس>
<title>صفحة بلا عنوان</title>
<نمط النوع = "نص/CSS">
<!--
جسم{
الهامش: 0 بكسل؛
}
-->
</نمط>
</الرأس>
<الجسم>
<iframe id="ifr" name="ifr" width="100%" height="500" src="bb.htm"></iframe>
</الجسم>
</html>
<script language="javascript" type="text/javascript">
var aa_value="أنا متغير في النافذة العلوية!";
var ifr_id=document.getElementById("ifr");
var ifr_window=window.frames["ifr"];
تنبيه ("تنبيه من النافذة العلوية: لا يمكن الحصول على متغير iframe بواسطة ifr_id، سيعود :" + ifr_id.bb_var);
تنبيه ("تنبيه من النافذة العلوية: لا يمكن الحصول على نموذج DOM الخاص بـ iframe بواسطة ifr_id، سيعود :" + ifr_id.window);
تنبيه("تنبيه من النافذة العلوية: احصل على src من المعرف:" + ifr_id.src);
تنبيه("تنبيه من النافذة العلوية: احصل على href من النافذة:" + ifr_window.document.location.href);
// نظرًا لأن bb.htm لم يتم تحميله بعد، فقد يتسبب التنزيل في حدوث خطأ.
// اتصل بالوظيفة ifr_window.bb() في iframe؛
// استدعاء المتغيرات داخل iframe
تنبيه("تنبيه من النافذة العلوية:" + ifr_window.bb_var);
//
تنبيه("تنبيه من النافذة العلوية:" + ifr_window.document.body.innerHTML);
وظيفة أأ (رسالة) {
تنبيه("أقوم بالتنبيه من النافذة العلوية، وقد تلقيت رسالة:n" + msg);
}
</script>
الكود: فيما يلي مقتطف مقتبس:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<الرأس>
<title>الإطار الفرعي</title>
<نمط النوع = "نص/CSS">
<!--
أتش تي أم أل، الجسم {
الهامش: 0 بكسل؛
العرض: 90%؛
}
-->
</نمط>
</الرأس>
<الجسم>
أنا إطار فرعي!
<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...<br />
...
</الجسم>
</html>
<script language="javascript" type="text/javascript">
var bb_var="أنا متغير في ifr";
وظيفةب(){
تنبيه ("تنبيه من iframe: أنا وظيفة إطار ifr")
}
// احصل على متغيرات الصفحة الرئيسية
تنبيه("تنبيه من iframeparent.ifr_id::" +parent.ifr_id);
تنبيه("تنبيه من iframeparent.aa_value :" +parent.aa_value);
// قم بتغيير ارتفاع iframe من خلال ifr_id للصفحة الرئيسية
تنبيه ("تنبيه من iframe: ifr'sclientHeight :" +document.body.clientHeight);
parent.ifr_id.height=document.body.clientHeight;
تنبيه ("تنبيه من iframe: ارتفاع التمرير في ifr:" + document.body.scrollHeight)؛
// استدعاء وظيفة النموذج الأصلي:
parent.aa("سأقوم باستدعاء دالة موجودة في النافذة العلوية");
// تغيير عنوان النموذج الأصلي:
تنبيه("تنبيه من iframe: سأغير عنوان النافذة العلوية");
top.document.title="تم تغيير قيمة العنوان";
// تم تغيير الحدود والتمرير من خلال ifr_id للنموذج الأصلي
تنبيه("تنبيه من iframe: سأغير حدودي وأقوم بالتمرير :");
top.ifr_id.border=0;
top.ifr_id.scrolling="no";
</script>