تأثير "صورة داخل صورة"--مناقشة استخدام علامات IFRAME
الكاتب：Eve Cole
وقت التحديث：2009-06-11 17:24:01
بالنظر إلى موقع الويب الحالي، فإن سرعة الإنترنت بطيئة بعض الشيء، ولكن تحتوي كل صفحة تقريبًا على الكثير من الأشياء المتشابهة مثل اللافتات وصور الأعمدة وحقوق الطبع والنشر وما إلى ذلك. بالطبع، بسبب الحاجة إلى نمط موقع ويب موحد وتأثير إعلاني ، لا حرج في ذلك، ولكن بعد كل شيء، يتم استنزاف أموال محافظ المستخدمين بشكل متزايد من خلال هذه الأشياء "المزخرفة". هل هناك أي طريقة لجعل هذه الأشياء المشابهة لم تعد بحاجة إلى التنزيل بعد تنزيل واحد، ولكن التنزيل فقط. محتوى الويب في المناطق التي تغير فيها المحتوى؟
الجواب هو بالتأكيد: قم بتطبيق علامة Iframe!
1. استخدام علامات Iframe <BR> عندما يتعلق الأمر بـ Iframe، ربما تكون قد ألقيته في "الزاوية المنسية"، ولكن عندما يتعلق الأمر بأخيه Frame، فلن تكون غير مألوف. علامة الإطار هي علامة إطار، ما نسميه بنية متعددة الإطارات هو عرض ملفات HTML متعددة في نافذة المتصفح. الآن، نواجه موقفًا واقعيًا للغاية: إذا كان هناك برنامج تعليمي، فسيتم تقسيمه إلى أقسام واحدًا تلو الآخر، وفي نهاية كل صفحة، توجد روابط إلى "القسم السابق" و"القسم التالي"، باستثناء محتوى. يختلف كل برنامج تعليمي عن الآخر، بالإضافة إلى ذلك، يبدو أن محتوى الأجزاء الأخرى من الصفحة هو نفسه، مما يجعل إنشاء صفحات غبية صفحة تلو الأخرى أمرًا مملًا للغاية الصفحة لم تتغير، ما عليك سوى جعل البرنامج التعليمي يتحول إلى صفحة محتوى صفحة تلو الأخرى، دون أي محتوى آخر. عند النقر على رابط الصفحة لأعلى ولأسفل، سيتم تغيير جزء محتوى البرنامج التعليمي فقط، وستبقى الأجزاء الأخرى دون تغيير بهذه الطريقة، أحدهما يوفر الوقت، والآخر هو أن البرنامج التعليمي سيحتوي على ثلاثة تغييرات طويلة وتغييرين قصيرين في المستقبل، كما أنه مريح للغاية، ولن يؤثر على الجيش بأكمله، والأهم من ذلك، اللافتات الإعلانية، وقوائم الأعمدة، يتم تنزيل التنقل والأشياء الأخرى المضمنة في كل صفحة تقريبًا مرة واحدة فقط ثم يتوقف تنزيلها.
علامة Iframe، والتي تسمى أيضًا علامة الإطار العائم، يمكنك استخدامها لتضمين مستند HTML في شاشة HTML. أكبر ميزة تختلف عن علامة الإطار هي أن ملف HTML المشار إليه بواسطة هذه العلامة لا يتم عرضه بشكل مستقل عن ملفات HTML الأخرى، ولكن يمكن تضمينه مباشرة في ملف HTML ودمجه مع محتوى ملف HTML ليصبح كاملاً بالإضافة إلى ذلك، يمكنك أيضًا عرض نفس المحتوى عدة مرات على الصفحة دون الحاجة إلى كتابة المحتوى بشكل متكرر.
الآن دعونا نتحدث عن استخدام علامات Iframe.
تنسيق استخدام علامة Iframe هو:
<Iframe src = "URL" width = "x" height = "x" التمرير = "[OPTION]"frameborder = "x"></iframe>
src: مسار الملف، والذي يمكن أن يكون ملف HTML أو نص أو ASP وما إلى ذلك؛
العرض والارتفاع: عرض وارتفاع منطقة "صورة داخل صورة"؛
التمرير: عندما لا يتم عرض ملف HTML المحدد لـ SRC في المنطقة المحددة، فإن خيار التمرير، إذا تم ضبطه على NO، لن يظهر شريط التمرير إذا كان تلقائيًا: سيظهر شريط التمرير تلقائيًا إذا كان نعم؛ سيتم عرضه؛
FrameBorder: عرض حدود المنطقة لمزج "صورة داخل صورة" مع المحتوى المجاور، غالبًا ما يتم تعيينه على 0.
على سبيل المثال:
<Iframe src = "http://netschool.cpcw.com/homepage" width = "250" height = "200" التمرير = "no"frameborder = "0"></iframe>
2. التحكم المتبادل بين النموذج الأصلي والإطار العائم <BR> في لغة البرمجة النصية والتسلسل الهرمي للكائنات، تسمى النافذة التي تحتوي على Iframe النموذج الأصلي، بينما يسمى الإطار العائم النموذج الفرعي. وضح أن هذين الاثنين هما هذه العلاقة يعد هذا أمرًا مهمًا لأنه للوصول إلى نموذج تابع في نموذج أصل أو العكس، يجب أن تعرف التسلسل الهرمي للكائن قبل أن تتمكن من الوصول إلى النموذج والتحكم فيه برمجيًا.
1. الوصول إلى الكائنات الموجودة في النموذج الفرعي والتحكم فيها في النموذج الأصلي <BR> في النموذج الأصلي، يعد Iframe، أي النموذج الفرعي، كائنًا فرعيًا لكائن المستند. يمكنك الوصول مباشرة إلى الكائنات الموجودة في النموذج الفرعي البرنامج النصي.
الآن هناك سؤال، كيف يمكننا التحكم في إطار Iframe هذا؟ هنا نحتاج إلى التحدث عن كائن Iframe. عندما نقوم بتعيين سمة المعرف لهذه العلامة، يمكننا تنفيذ سلسلة من عناصر التحكم على HTML الموجود في Iframe من خلال Document Object Model DOM.
على سبيل المثال، قم بتضمين ملف test.htm في example.htm والتحكم في بعض كائنات العلامات في test.htm:
<Iframe src = "test.htm" id = "test" width = "250" height = "200" التمرير = "no"frameborder = "0"></iframe>
رمز ملف test.htm هو:
<أتش تي أم أل>
<الجسم>
<h1 id="myH1">مرحبًا يا ولدي</h1>
</الجسم>
</html>
إذا أردنا تغيير النص الموجود في علامة H1 برقم المعرف myH1 إلى مرحباً يا عزيزي يمكننا استخدام:
document.myH1.innerText="مرحبا، عزيزتي"(يمكن حذف المستند)
في ملف example.htm، يتوافق النموذج الفرعي المشار إليه بواسطة كائن علامة Iframe مع نموذج كائن DHTML العام، وطريقة التحكم في الوصول إلى الكائن هي نفسها، لذلك لن أخوض في التفاصيل.
2. الوصول إلى الكائنات الموجودة في النموذج الأصلي والتحكم فيها في النموذج الفرعي <BR> في النموذج الفرعي، يمكننا الوصول إلى الكائنات الموجودة في النافذة الأصلية من خلال الكائن الأصلي (الأصل).
مثل example.htm:
<أتش تي أم أل>
<body onclick="alert(tt.myH1.innerHTML)">
<اسم الإطار = "tt" src = "frame1.htm" العرض = "250" الارتفاع = "200" التمرير = "لا" إطار الحدود = "0"></iframe>
<h1 id="myH2">مرحبا زوجتي</h1>
</الجسم>
</html>
إذا أردنا الوصول إلى نص العنوان فيframe1.htm برقم المعرف myH2 وتغييره إلى "hello,my friends"، فيمكننا الكتابة على النحو التالي:parent.myH2.innerText="hello,my friends"
هنا يمثل الكائن الأصل النموذج الحالي (النموذج الذي يوجد به example.htm). للوصول إلى الكائنات الموجودة في النموذج الأصلي في النموذج الفرعي، بدون استثناء، يتم ذلك من خلال الكائن الأصل.
على الرغم من أن إطار Iframe مضمن في ملف HTML آخر، إلا أنه يظل مستقلاً نسبيًا ويعتبر "مملكة مستقلة". تنطبق الخصائص الموجودة في ملف HTML الواحد أيضًا على الإطارات العائمة.
فقط تخيل أنه من خلال علامة Iframe، يمكننا التعبير عن المحتوى غير المتغير كإطار Iframe، وبهذه الطريقة، لا يتعين علينا كتابة نفس المحتوى بشكل متكرر، وهذا يشبه إلى حد ما عملية أو وظيفة في البرمجة، وكم هو ممل يتم حفظ العمل اليدوي! بالإضافة إلى ذلك، والأهم من ذلك، أنه يجعل تعديلات الصفحة أكثر جدوى، لأنه بدلاً من الاضطرار إلى تعديل كل صفحة لضبط التخطيط، تحتاج فقط إلى تعديل تخطيط نموذج أصل واحد.
شيء واحد يجب ملاحظته هو أن متصفح Nestscape لا يدعم علامة Iframe، ولكن في عالم IE اليوم، لا يبدو أن علامات Iframe تستخدم على نطاق واسع، ليس فقط من أجل مصلحتها الخاصة (موقع الويب). ولكن أيضًا لمستخدمي الإنترنت لتوفير رسوم الإنترنت، لماذا لا؟
