المراجع بين الأطر
يتم توفير جميع الإطارات في الصفحة كسمات لكائن النافذة في شكل مجموعة، على سبيل المثال: تمثل window.frames مجموعة جميع الإطارات في الصفحة، وهذا مشابه لكائنات النموذج وكائنات الارتباط وكائنات الصورة وما إلى ذلك .، ولكن الفرق هو أن هذه المجموعات هي خصائص الوثيقة. ولذلك، للإشارة إلى إطار فرعي، يمكنك استخدام بناء الجملة التالي:
انسخ رمز الكود كما يلي:
window.frames["frameName"];
window.frames.frameName
نافذة.إطارات[فهرس]
من بينها، يمكن أيضًا استبدال كلمة window أو حذفها بـ self. بافتراض أن اسم الإطار هو الإطار الأول في الصفحة، فإن طرق الكتابة التالية متكافئة:
انسخ رمز الكود كما يلي:
self.frames["frameName"]
الإطارات الذاتية[0]
الإطارات[0]
اسم الإطار
يتوافق كل إطار مع صفحة HTML، لذا فإن هذا الإطار هو أيضًا نافذة متصفح مستقلة، ويحتوي على جميع خصائص النافذة. باستخدام كائن النافذة هذا، يمكنك بسهولة تشغيل الصفحات الموجودة فيه، مثل استخدام كائن window.document لكتابة البيانات إلى الصفحة، واستخدام خاصية window.location لتغيير الصفحة في الإطار، وما إلى ذلك.
يقدم ما يلي المراجع المتبادلة بين مستويات مختلفة من الأطر:
1. مرجع من الإطار الأصلي إلى الإطار الفرعي
بمعرفة المبادئ المذكورة أعلاه، من السهل جدًا الرجوع إلى الإطار الفرعي من الإطار الأصلي، أي:
انسخ رمز الكود كما يلي:
window.frames["frameName"];
يشير هذا إلى الإطار الفرعي المسمى اسم الإطار داخل الصفحة. إذا كنت تريد الإشارة إلى إطار فرعي داخل إطار فرعي، وفقًا لطبيعة الإطار المشار إليه، وهو في الواقع كائن النافذة، فيمكنك تنفيذه على النحو التالي:
انسخ رمز الكود كما يلي:
window.frames["frameName"].frames["frameName2"];
بهذه الطريقة، تتم الإشارة إلى الإطار الفرعي من المستوى الثاني، ومن خلال القياس، يمكن تحقيق مرجع الأطر متعددة الطبقات.
2. مرجع من الإطار الفرعي إلى الإطار الأصلي
يحتوي كل كائن نافذة على خاصية أصل تمثل الإطار الأصلي الخاص به. إذا كان الإطار بالفعل إطارًا عالي المستوى، فإن window.parent يمثل أيضًا الإطار نفسه.
3. المراجع بين إطارات الأخوة
إذا كان الإطاران عبارة عن إطارين فرعيين لنفس الإطار، فإنهما يطلق عليهما إطارات شقيقة ويمكنهما الإشارة إلى بعضهما البعض من خلال الإطار الأصلي، على سبيل المثال، تتضمن الصفحة إطارين فرعيين:
انسخ رمز الكود كما يلي:
<صفوف الإطارات = "50%,50%">
<frame src="1.html" name="frame1" />
<frame src="2.html" name="frame2" />
</مجموعة الإطارات>
في الإطار 1، يمكنك استخدام العبارة التالية للإشارة إلى الإطار 2:
انسخ رمز الكود كما يلي:
self.parent.frames["frame2"];
4. المراجع المتبادلة بين مستويات مختلفة من الأطر
مستوى الإطار مخصص لإطار المستوى الأعلى. عندما تكون المستويات مختلفة، طالما أنك تعرف المستوى الذي تتواجد فيه ومستوى واسم الإطار الآخر، يمكنك بسهولة الوصول إلى بعضها البعض باستخدام خصائص كائن النافذة المشار إليه بواسطة الإطار، على سبيل المثال:
انسخ رمز الكود كما يلي:
self.parent.frames["childName"].frames["targetFrameName"];
5. إشارة إلى إطار المستوى الأعلى
كما هو الحال مع الخاصية الأصل، يحتوي كائن window أيضًا على خاصية علوية. وهو يمثل مرجعًا لإطار المستوى الأعلى، والذي يمكن استخدامه لتحديد ما إذا كان الإطار نفسه هو إطار المستوى الأعلى، على سبيل المثال:
انسخ رمز الكود كما يلي:
// تحديد ما إذا كان هذا الإطار هو إطار المستوى الأعلى
إذا (الذات == الأعلى) {
//فعل شيء ما
}
قم بتغيير صفحة تحميل الإطار
المرجع إلى الإطار هو مرجع إلى كائن النافذة، باستخدام سمة الموقع لكائن النافذة، يمكنك تغيير التنقل في الإطار، على سبيل المثال:
window.frames[0].location="1.html";
يؤدي هذا إلى إعادة توجيه صفحة الإطار الأول في الصفحة إلى 1.html. وبالاستفادة من هذه الخاصية، يمكنك أيضًا استخدام رابط واحد لتحديث إطارات متعددة.
انسخ رمز الكود كما يلي:
<صفوف الإطارات = "50%,50%">
<frame src="1.html" name="frame1" />
<frame src="2.html" name="frame2" />
</مجموعة الإطارات>
<!--سوميكود-->
<a href="frame1.location='3.html;frame2.location='4.html'" onclick="">الرابط</a>
<!--سوميكود-->
قم بالإشارة إلى متغيرات ووظائف JavaScript ضمن أطر عمل أخرى
قبل تقديم تقنيات للإشارة إلى متغيرات ووظائف JavaScript في أطر عمل أخرى، دعونا نلقي نظرة على الكود التالي:
انسخ رمز الكود كما يلي:
<script language="JavaScript" type="text/javascript">
<!--
وظيفة مرحبا () {
تنبيه ("مرحبا، اياكس!")؛
}
window.hello();
//-->
</script>
إذا قمت بتشغيل هذا الكود، ستظهر نافذة "hello, ajax!"، وهي نتيجة تنفيذ الدالة hello(). فلماذا أصبحت hello() طريقة لكائن النافذة؟ لأن جميع المتغيرات العامة والوظائف العامة المحددة داخل الصفحة هي أعضاء في كائن النافذة. على سبيل المثال:
انسخ رمز الكود كما يلي:
فار أ=1;
تنبيه (window.a)؛
سيظهر مربع حوار يظهر 1. ينطبق نفس المبدأ على مشاركة المتغيرات والوظائف بين أطر العمل المختلفة عن طريق استدعائها من خلال كائن النافذة.
على سبيل المثال: تتكون صفحة تصفح المنتج من إطارين فرعيين يمثل الجانب الأيسر الرابط لفئة المنتج؛ عندما ينقر المستخدم على رابط الفئة، يتم عرض قائمة المنتجات المقابلة على الجانب الأيمن؛ شراء] رابط بجوار المنتج لإضافة عربة تسوق المنتج.
في هذا المثال، يمكن استخدام صفحة التنقل اليسرى لتخزين المنتجات التي يرغب المستخدم في شرائها، لأنه عندما ينقر المستخدم على رابط التنقل، فإن ما يتغير هو صفحة أخرى، أي صفحة عرض المنتج، وصفحة التنقل نفسها يبقى دون تغيير، لذلك لن يتم فقدان متغيرات JavaScript ويمكن استخدامها لتخزين البيانات العالمية. مبدأ تنفيذها هو كما يلي:
افترض أن الصفحة الموجودة على اليسار هي link.html والصفحة الموجودة على اليمين هي show.html. بنية الصفحة هي كما يلي:
انسخ رمز الكود كما يلي:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<أتش تي أم أل>
<الرأس>
<title> مستند جديد </title>
</الرأس>
<frameset cols="20%,80%">
<frame src="link.html" name="link" />
<frame src="show.html" name="show" />
</مجموعة الإطارات>
</html>
يمكنك إضافة عبارة مثل هذه بجوار المنتجات المعروضة في show.html:
<a href="void(0)" onclick="self.parent.link.addToOrders(32068)">إضافة إلى سلة التسوق</a>
من بينها، يمثل الرابط إطار التنقل. يتم تعريف مصفوفة arrOrders في صفحة link.html لتخزين معرف المنتج. يتم استخدام الوظيفة addToOrders () للرد على حدث النقر للرابط [Purchase] بجوار يمثل معرف المعلمة الذي يتلقاه معرف المنتج، والمثال هو منتج بالمعرف 32068:
انسخ رمز الكود كما يلي:
<script language="JavaScript" type="text/javascript">
<!--
var arrOrders=new Array();
وظيفة addToOrders(id){
arrOrders.push(id);
}
//-->
</script>
بهذه الطريقة، يمكنك استخدام arrOrders في صفحة الخروج أو صفحة تصفح عربة التسوق للحصول على جميع المنتجات الجاهزة للشراء.
يمكن لإطار العمل تقسيم الصفحة إلى وحدات متعددة ذات وظائف مستقلة، وكل وحدة مستقلة عن بعضها البعض، ولكن يمكن ربطها من خلال مرجع كائن النافذة، وهي آلية مهمة في تطوير الويب.