الإطارات المضمّنة في HTML

استخدم درس YouTube وصفة iframe شهيرة لمشغّل مستضاف. هذه الجلسة تعود إلى الفكرة العامة: إطار مضمّن يعرض مستند HTML آخر داخل مستطيل في صفحتك — خرائط أو مستندات أو لوحات أو أدوات مساعدة أو صفحة محلية صغيرة كتبتها بنفسك. لست محدودًا بمضيفي الفيديو. تؤطّر سياق تصفّح متداخلًا له عنوانه ومنطقة تمرير و(غالبًا) سكربتاته. اعتبر YouTube حالة خاصة لنفس العنصر لا السبب الوحيد لوجود iframe.

ماذا يفعل iframe؟

يطلب iframe من المتصفح تحميل مستند ثانٍ ورسمه داخل مساحة محجوزة في الصفحة الأم. ما زال الزائر يرى عناوينك وفقراتك وتنقّلك حول الإطار، لكن النقرات والتمرير والنماذج والسكربتات داخل الإطار تنتمي عادةً للصفحة المتداخلة. ذلك قوي للعروض والأدوات التي لا تعيد بناءها من الصفر — ومكلف إن رصت إطارات طرف ثالث ثقيلة كثيرة في صفحة مبتدئ. افصل ذهنيًا المستند الأم الذي تؤلفه عن المستند الابن الذي يحمّله الإطار.

إجابة مباشرة

استخدم <iframe src="https://example.com/page" title="Description" width="600" height="400"></iframe>. src هو عنوان الصفحة المتداخلة (بعيد أو ملف محلي نسبي). title يسمّي الإطار لإمكانية الوصول. العرض والارتفاع يحجزان مساحة حتى لا يقفز المحتوى المحيط. ليست كل المواقع تسمح بالتضمين؛ كثير منها يرفض التأطير. عندما لا يلزم تضمين كامل، الرابط العادي أوضح وأخف وأسهل للتصحيح.

تضمين أم مجرد رابط؟

معاينة بعيدة بسيطة

نمط بسيط يحمّل صفحة عامة تسمح بالتضمين (أو يفشل بصراحة إن لم تسمح). ضع دائمًا title ذا معنى.

قراءة العينة الأساسية

• src يشير إلى عنوان المستند المتداخل
• title اسم إمكانية الوصول للإطار — عادة لازمة لا زينة
• width وheight يحجزان مساحة حتى لا يقفز النص المحيط
• إن بقي الإطار فارغًا فقد يمنع الهدف التضمين؛ غالبًا سياسة لا وسم معطوب
• تضمينات YouTube استخدام متخصص لنفس العنصر بشكل URL من Share → Embed
• الإطارات الفارغة تعلّم مبكرًا: ينتهي تحكمك حيث تبدأ قواعد الموقع الآخر

تمرين بصفحة ابن محلية

لتمرين موثوق أنشئ child.html صغيرًا بجانب الصفحة الأم وأطّره. تتحكم بالطرفين فلا يحظر موقع أجنبي التأطير. هذا أأمن طريق لتعلّم العنصر قبل ملاحقة تضمينات طرف ثالث قد ترفض الظهور.

قراءة العينة المحلية

• src="child.html" النسبي يحمّل ملفًا بجانب الأم (نفس قواعد مسارات الصور والسكربتات)
• ضع عنوانًا وفقرة قصيرة داخل child.html لترى المحتوى
• غيّر نص الابن وحدّث الأم وتأكد من تحديث الإطار
• يعلّم هذا النمط العنصر دون الاعتماد على قوائم سماح طرف ثالث

تضمينات YouTube مقابل iframe العامة

حوار Share → Embed في YouTube طريقة موجّهة لملء iframe مشغّلهم بعنوان التضمين الصحيح. تستخدم iframe العامة نفس العنصر لأي عنوان مسموح: عارضات مستندات وخرائط وصفحاتك المساعدة والمزيد. احتفظ بعادات درس YouTube (title وحجم معقول وعنوان رسمي عند الحاجة) وأضف حكم هذه الجلسة الأوسع: ضمّن فقط عندما يهم التفاعل في المكان، وإلا ارجع لرابط عادي.

الأمن والأداء لمستوى المبتدئ

كل iframe يضيف مستندًا آخر للتحميل ومزيدًا من غرائب التمرير وموضعًا آخر قد تعمل فيه سكربتات طرف ثالث. سمات متقدمة مثل sandbox تضيّق ما قد تفعله الصفحات المتداخلة — اتركها لموضوع لاحق بعد إتقان التضمين والعنوان. الآن ثلاث قواعد: لا تكدّس إطارات ثقيلة فوق كل فقرة؛ فضّل الرابط عند كفاية الخروج؛ ولا تفترض أن الإطار الفارغ يعني وسوم HTML معطوبة عندما يرفض الهدف التأطير ببساطة.

عادات إمكانية الوصول

سمِّ كل iframe بـ title واضح يصف المحتوى المتداخل («خريطة الدورة»، «صفحة تمرين محلية») لا «frame1» أو فراغًا. قدّم التضمين بجملة قصيرة ليعرف مستخدمو لوحة المفاتيح وقارئ الشاشة لماذا هو هناك. إن كانت الصفحة المتداخلة مادة أساسية للدرس فوفّر أيضًا رابطًا عاديًا لفتحها كاملة. إمكانية الوصول للإطارات عن التسمية والسياق لا عن الادعاء أن الأم والابن مستند واحد.

تمرين في المحرر

1. أنشئ child.html بعنوان وفقرة تمرين.
2. في الصفحة الأم ضمّنه بـ iframe وtitle واضح وعرض/ارتفاع معتدل.
3. افتح الأم محليًا وتأكد من ظهور محتوى الابن داخل المستطيل.
4. اختياريًا جرّب عنوانًا بعيدًا؛ إن بقي فارغًا عد للابن المحلي ولاحظ أن السياسة قد تكون السبب لا وسمًا ناقصًا.
5. أضف رابطًا عاديًا لنفس عنوان الابن وقارن التجربة بالنسخة المؤطّرة.
6. اكتب جملة فوق الإطار تصف ما سيراه الزائر ثم أعد التحقق أن title يطابق الوصف.

أخطاء سهلة

• غياب title على iframe
• افتراض أن كل موقع خارجي سيُحمَّل داخل إطارك
• تداخل كثير من الإطارات الثقيلة في صفحة واحدة
• خلط «ربطت العنوان في فقرة» مع «ضمّنت إطارًا»
• معاملة تضمين بعيد محظور كمسار src معطوب بينما السبب سياسة
• نسيان أن تضمين YouTube وصفة iframe واحدة لا العنصر كله

ملخص

• iframe يضمّن صفحة أخرى عبر src
• أدرج دائمًا title واضحًا
• قد يمنع الموقع الهدف التضمين
• فضّل رابطًا عاديًا عندما لا يلزم التفاعل في المكان
• تمرّن بأمان مع child.html محلي قبل الاعتماد على صفحات طرف ثالث