تتمثل وظيفة عنصر iframe في تضمين مستند داخل مستند وإنشاء إطار عائم. كثير من الناس لا يفهمون تمامًا كيفية التحكم في iframe، وما زالوا في حالة غامضة من الفهم.
ملاحظتان حول إطارات iframe، ifr هي قيمة المعرف والاسم لإطار iframe موجود:
ما يلي هو جزء مقتبس:
document.getElementById("ifr");
window.frames["ifr"];
لأنها
تأخذ نموذج DOM كاملاً (لا أعرف ما إذا كان هذا صحيحًا).
تريد فقط تغيير src أو الحدود والتمرير والسمات الأخرى لإطار iframe (التي تختلف عن مفهوم الخاصية، ولا يمكن كتابة الخاصية في علامات، مثل:scrollHeight، وinnerHTML، وما إلى ذلك)، تحتاج إلى استخدام الطريقة الأولى.
إذا كنت ترغب في الحصول على صفحة iframe (وليس iframe نفسه)، فأنت بحاجة إلى استخدام الطريقة الثانية، لأنها تحصل على نموذج DOM كامل، على سبيل المثال، إذا كنت ترغب في الحصول على محتوى document.body الخاص بـ iframe، يمكنك فقط استخدام الطريقة الثانية.
لاحظ أيضًا أنه إذا لم يتم تحميل صفحة iframe بالكامل، فسيحدث خطأ خطير عند استدعاء نموذج DOM الخاص بـ iframe، لذلك، يجب عليك إعداد وضع متسامح مع
الأخطاء ، أحدهما هو aa.htm والآخر هو رمز bb.htm
aa .htm
: ما يلي هو جزء الاقتباس:
<!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>
bb.htm
الكود: فيما يلي مقتطف مقتبس:
<!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>