في هذا الدرس 7تصفّح المواضيع
تمثل الصفحات المتداخلة في لغة HTML القدرة المعمارية على تضمين مستند ويب متكامل ومستقل داخل مستند آخر حاضن له. يتحقق هذا التضمين عبر وسم
<iframe> الذي ينشئ سياق تصفح متداخل يتمتع بكائن وثيقة مستقل وشجرة عناصر خاصة به تماماً عن الصفحة الأم.في بدايات تصميم الويب، اعتمدت الواجهات المتعددة على وسوم تقسيم النوافذ القديمة التي كانت تجزئ الشاشة بطريقة جامدة وغير مرنة. ألغت معايير الويب الحديثة تلك المنظومة واعتمدت الإطارات المتداخلة الحرة
<iframe>، مما أتاح دمج الخرائط التفاعلية ومقاطع الفيديو والتطبيقات المصغرة بسلاسة فائقة.يعد وسم
<iframe> عنصراً مزدوجاً يتطلب وسم بداية ووسم إغلاق إلزامي. يتم تحديد عنوان المستند المراد تضمينه عبر خاصية src، بينما يُوضع نص توضيحي بديل بين الوسمين لإعلام المتصفحات القديمة أو المعطلة التي لا تدعم عرض الإطارات المتداخلة.
HTML
<!-- Basic accessible iframe embed -->
<iframe
src="courses.html"
title="Interactive Pricing Calculator"
width="600"
height="400">
<p>Your browser does not support iframes.</p>
</iframe>
إلى جانب جلب المستندات الخارجية عبر مسار رابط، يقدم معيار HTML5 خاصية
srcdoc التي تسمح بتمرير شيفرة HTML مباشرة داخل خاصية الإطار لتُعرض فوراً دون الحاجة لإجراء طلب شبكي إضافي لجلب ملف خارجي.تمنح المتصفحات الإطار المتداخل
<iframe> أبعاداً افتراضية أولية تبلغ 300 بكسل للعرض و150 بكسل للارتفاع، مع إحاطته بحد مجسم تلقائي. تعتمد التصاميم الحديثة على قواعد CSS للتحكم في هذه الأبعاد بسلاسة وإزالة الحدود التقليدية غير المرغوبة.
HTML
<iframe
src="courses.html"
width="500"
height="300"
title="Embedded Course Catalog">
</iframe>أصبحت خصائص التنسيق القديمة مثل
frameborder="0" و scrolling مهملة تماماً في معايير HTML5؛ ويجب استبدالها بقواعد التنسيق الحديثة مثل border: none لإخفاء الإطار المحيط وضمان مطابقة المعايير القياسية العالمية.تمتلك لغة HTML ميزة أصيلة قوية تتمثل في استخدام الإطار
<iframe> كوجهة مستهدفة لعرض الروابط التشعبية. عبر تزويد الإطار بخاصية name تحمل اسماً معرفاً، تستطيع الروابط توجيه تصفحها إلى داخل هذا الإطار بدلاً من الانتقال لصفحة جديدة.
HTML
<!-- Target frame navigation -->
<p>Select a document to preview:</p>
<a href="files/iframe-login.html" target="doc-viewer">Summary</a>
<a href="files/iframe-register.html" target="doc-viewer">Details</a>
<iframe
name="doc-viewer"
src="files/iframe-login.html"
title="Document Viewer Frame">
</iframe>عندما ينقر المستخدم على رابط يحمل خاصية
target مطابقة لاسم الإطار، يوجه المتصفح طلب جلب الصفحة الجديدة إلى سياق الإطار الداخلي فقط، مما يحافظ على استقرار الصفحة الأم وجميع مدخلات النماذج وموضع التمرير دون أي وميض أو إعادة تحميل.يحمل تضمين صفحات ومحتويات خارجية مخاطر أمنية جسيمة مثل هجمات حقن الشيفرات الخبيثة والاستيلاء على الجلسات وسرقة التفاعلات. يوفر معيار HTML5 خاصية العزل الأمني
sandbox لتطبيق حجر أمني مشدد على محتوى الإطار وتجريده من كافة الامتيازات الخطرة.عند تطبيق خاصية
sandbox مجردة دون أي قيم، يفعل المتصفح حظراً شاملاً: تُعطل جميع لغات البرمجة التنفيذية، وتُمنع النماذج من الإرسال، وتُحجب ملفات تعريف الارتباط، وتُمنع النوافذ المنبثقة، وتُحظر أي محاولة لإعادة توجيه الصفحة الأم.| رمز خاصية العزل | الصلاحية الممنوحة | الأثر الأمني والتشغيلي |
|---|---|---|
allow-scripts |
تشغيل لغة جافاسكريبت | يسمح بالشيفرات التفاعلية مع الحفاظ على عزل الأصل ما لم يُدمج مع الأصل المشترك |
allow-forms |
إرسال نماذج الإدخال | يمكّن المستخدم من إرسال البيانات المكتوبة في نماذج الإطار إلى الخوادم |
allow-same-origin |
الاحتفاظ بنفس نطاق الأصل | يتيح الوصول لملفات الكوكيز ومساحة التخزين الخاصة بنطاق المستند |
allow-popups |
فتح نوافذ منبثقة جديدة | يسمح بفتح صفحات جديدة في ألسنة مستقلة دون اختراق الحاوية الأم |
allow-top-navigation |
توجيه النافذة الرئيسية | يسمح للإطار بتغيير مسار الصفحة الأم الحاضنة بالكامل |
HTML
<!-- Sandboxed frame with minimal permissions -->
<iframe
src="examples/navigation.html"
sandbox="allow-scripts allow-forms"
title="Secured External Widget"
width="500"
height="300">
</iframe>إلى جانب عزل الشيفرات والأصل، توفر المتصفحات الحديثة تحكماً دقيقاً في العتاد والميزات الحساسة عبر خاصية
allow. تطبق هذه الخاصية سياسة أذونات متطورة تحدد مدى قدرة المستند المضمن على استخدام الكاميرا والميكروفون والشاشة الكاملة والواجهات الحساسة.
HTML
<!-- Permissions Policy on embedded frame -->
<iframe
src="https://www.youtube.com/embed/hbMjIlSmyUE"
allow="fullscreen; accelerometer; autoplay"
title="Embedded Video Presentation"
width="640"
height="360">
</iframe>يتيح لك مختبر المحاكاة التفاعلي التالي تجربة توجيه الروابط داخل الإطار، وفحص رموز العزل الأمني، وضبط سياسات أذونات العتاد عملياً وبأمان كامل:
تمثل الإتاحة الرقمية متطلباً تقنياً وقانونياً جوهرياً لكافة الإطارات المتداخلة. تعتمد قارئات الشاشة والتقنيات المساعدة على خاصية
title لإعلان محتوى الإطار ووظيفته للمستخدمين ذوي الإعاقة البصرية؛ ويؤدي غياب هذا العنوان أو كتابة أسماء مبهمة إلى حرمانهم من فهم سياق الصفحة.لتحسين سرعة تحميل الصفحة وتوفير استهلاك باقات البيانات، يوفر معيار الويب خاصية التحميل الكسول الأصيلة
loading="lazy". يعمل المتصفح بموجبها على تأخير جلب بيانات الإطارات البعيدة عن شاشة العرض الحالية حتى يقترب المستخدم بالتمرير نحو موضعها.
HTML
<!-- Production-ready accessible iframe -->
<iframe
src="/courses.html"
title="Interactive System Performance Board"
loading="lazy"
sandbox="allow-scripts"
width="800"
height="450">
</iframe>
خلاصة المعرفة ومحطة الانتقال
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
ملخص الدرس: أتقنت في هذا الدرس مفهوم الإطارات المتداخلة iframe، والتحكم في الأبعاد والحدود، وتوجيه الروابط نحو الإطار، وجدار العزل الأمني sandbox، وضبط سياسات الأذونات allow، وعناوين الإتاحة والتحميل الكسول. الخطوة التالية تنقلنا إلى غرفة التحكم الخفية للمستند في درس رأس الصفحة head.
رحلتك في الدرس
—سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
ابنِ لغتك البرمجية
المصطلحات5
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
0 / 5 مفهومةأول بطاقة، أول خطوة
- 01 Inline Frame إطار متداخل
- عنصر في لغة HTML يتيح تضمين مستند ويب مستقل داخل الصفحة الحاضنة الحالية.
- للمراجعة
- 02 Browsing Context سياق التصفح
- البيئة البرمجية التي يُعرض فيها كائن المستند للمستخدم، وتملك نافذة مستقلة وسجل جلسة خاص.
- للمراجعة
- 03 Sandbox بيئة العزل الأمني
- آلية حماية تفرض قيوداً مشددة على البرمجيات والنماذج والميزات داخل الإطار المتداخل.
- للمراجعة
- 04 Permissions Policy سياسة الأذونات
- معيار ويب يمكّن المطورين من تحديد أو حظر ميزات العتاد كالكاميرا والميكروفون للإطارات.
- للمراجعة
- 05 Clickjacking انتحال النقرات
- هجوم خبيث يقوم فيه المهاجم بخداع المستخدم للنقر على طبقة إطار خفية فوق واجهة ظاهرية.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
حروف قليلة. معنى كامل.
الاختصارات3
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
0 / 3 مفهومةأول بطاقة، أول خطوة
- 01 CSP CSP
- Content Security Policy
- معيار أمان حاسوبي يحد من هجمات انتحال النقرات وحقن الشيفرات الخبيثة عبر حظر التضمين غير المصرح به.
- للمراجعة
- 02 WHATWG WHATWG
- Web Hypertext Application Technology Working Group
- المجموعة المسؤولة عن تطوير معايير HTML الحية والمواصفات القياسية للإطارات المتداخلة.
- للمراجعة
- 03 DOM DOM
- Document Object Model
- واجهة برمجية موحدة تمثل مستند HTML كشجرة عناصر برمجية متسلسلة يمكن تعديلها.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
من الفهم للتطبيق
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
0/4مهام منجزة
-
أنشئ إطاراً متداخلاً ميسراً يشير إلى صفحة فرعية مع تحديد الأبعاد وخاصية العنوان الوصفي title.
-
عين خاصية name للإطار وأنشئ روابط تشعبية بخاصية target مطابقة لتوجيه الصفحات داخله.
-
قم بتهيئة إطار معزول بخاصية sandbox مع تفعيل أذونات السكريبت والنماذج لعزل المحتوى غير الموثوق.
-
اكتب وسم إطار مزوداً بخاصية allow تتيح ملء الشاشة وتحظر وصول الإطار للكاميرا كلياً.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
مساحة التحدي
اختبر فهمك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
10أسئلة
3أنواع تحديات
100%هدف الإتقان
تصحيح تلقائي. فرص بلا حدود.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.