حلول مصر

شرح الوسم IFrame (تضمين محتوى من موقع أخر) | HTML

شرح وسم Iframe (تضمين الصفحات)

يُعد وسم Iframe من أقوى وأهم الوسوم في لغة HTML، حيث يسمح لك بعرض صفحة ويب كاملة داخل صفحة ويب أخرى. يستخدم هذا الوسم بكثرة لعرض الخرائط، الفيديوهات (مثل يوتيوب)، الإعلانات، أو حتى تطبيقات ويب مصغرة داخل موقعك. هذا الدرس سيشرح كل تفصيلة صغيرة وكبيرة حول هذا الوسم وكيفية التعامل معه باحترافية وأمان.

مفهوم Iframe وأساسيات الاستخدام

الوسم <iframe> هو اختصار لـ "Inline Frame" أي "إطار مضمن". وهو يسمح بإنشاء نافذة داخل صفحتك تعرض محتوى من مصدر آخر.

الخصائص الأساسية (Attributes)

  • الوسم <iframe>: هو الوسم الحاوي، ويجب أن يكون له وسم إغلاق.
  • الخاصية src: (Source) هي أهم خاصية، حيث نضع فيها رابط الصفحة (URL) التي نريد عرضها داخل الإطار.
  • الخاصية title: تستخدم لوصف محتوى الإطار. هذه الخاصية بالغة الأهمية لبرامج قراءة الشاشة (Screen Readers) لمساعدة ذوي الإعاقة البصرية على فهم محتوى الإطار.
  • ملاحظة هامة: بعض المواقع الكبرى (مثل Google و Facebook) تمنع عرض صفحاتها داخل iframe في مواقع أخرى لأسباب أمنية (تسمى الحماية من Clickjacking)، لذا قد لا تعمل بعض الروابط إذا جربتها.

مثال (1): البنية الأساسية

كود HTML لإنشاء Iframe بسيط 

<h2>صفحة ويب داخلية</h2>

<!-- إطار بسيط يعرض موقعاً آخر -->
<iframe 
    src="https://www.wikipedia.org/" 
    title="موقع ويكيبيديا">
</iframe>

<p>لاحظ كيف يظهر الموقع أعلاه داخل صندوق في صفحتنا.</p>

اختر - ما هي الخاصية المسؤولة عن تحديد رابط الموقع الذي سيظهر داخل الـ Iframe؟
(أ) href. (ب) link. (ج) src. (د) source.

الإجابة: (ج) src. (وهي اختصار لـ Source وتعني المصدر).

التحكم في الأبعاد والمظهر (Styling)

افتراضياً، يظهر الـ iframe بحدود سميكة وأبعاد صغيرة. يمكننا التحكم في ذلك باستخدام خصائص HTML القديمة أو يفضل استخدام CSS.

تغيير الطول والعرض وإزالة الحدود

  • الخاصية width: لتحديد عرض الإطار (يمكن بالبكسل px أو النسبة المئوية %).
  • الخاصية height: لتحديد ارتفاع الإطار.
  • إزالة الإطار (Border): قديماً كانت تستخدم خاصية frameborder="0"، ولكن الطريقة الحديثة والصحيحة هي استخدام CSS عن طريق style="border: none;".
  • تغيير شكل الإطار: يمكنك بدلاً من إزالته، تلوينه وتغيير شكله باستخدام CSS Border (مثل border: 2px solid red;).

مثال (2): تنسيق الـ Iframe

كود CSS و HTML للتحكم في الشكل 

<!-- إطار بعرض 100% وارتفاع 500 بكسل وبدون حدود -->
<iframe 
    src="https://www.example.com" 
    title="موقع تجريبي"
    width="100%"
    height="500"
    style="border: none;">
</iframe>

<!-- إطار بحدود ملونة -->
<iframe 
    src="demo_page.html" 
    width="300" 
    height="200" 
    style="border: 3px dashed blue;">
</iframe>

اختر - ما هي أفضل طريقة حديثة لإزالة الحدود (Border) المحيطة بالـ Iframe؟
(أ) استخدام السمة remove-border. (ب) استخدام CSS style="border:none". (ج) استخدام السمة frameborder="0". (د) مسح وسم الإغلاق.

الإجابة: (ب) استخدام CSS style="border:none". (الطريقة الأخرى قديمة وغير مفضلة في HTML5).

فتح الروابط داخل الإطار (Targeting)

يمكن استخدام الـ iframe كـ "هدف" (Target) للروابط. بمعنى، عند الضغط على رابط في صفحتك، تفتح الصفحة الجديدة داخل الـ iframe الموجود في نفس الصفحة بدلاً من فتح نافذة جديدة.

كيفية الربط بين الرابط والـ Iframe

  • الخاصية name في Iframe: يجب أولاً إعطاء اسم مميز للإطار باستخدام الخاصية name="myFrameName".
  • الخاصية target في الرابط (Anchor): في وسم الرابط <a>، نستخدم الخاصية target ونضع فيها نفس الاسم الذي اخترناه للإطار.
  • عند الضغط على الرابط، سيبحث المتصفح عن iframe يحمل هذا الاسم ويقوم بتحميل الرابط بداخله.

مثال (3): قائمة روابط تفتح في نافذة واحدة

كود تغيير محتوى الـ Iframe بالروابط 

<!-- الروابط التي تتحكم في الإطار -->
<p>اختر موقعاً لعرضه:</p>
<ul>
    <li><a href="https://www.wikipedia.org" target="content_frame">فتح ويكيبيديا</a></li>
    <li><a href="https://www.bing.com" target="content_frame">فتح محرك بينج</a></li>
</ul>

<!-- الإطار الذي سيعرض المحتوى -->
<!-- لاحظ الاسم هنا يطابق الـ target في الروابط -->
<iframe 
    src="about:blank" 
    name="content_frame" 
    width="100%" 
    height="400"
    style="border:1px solid #ccc;">
</iframe>

اختر - لكي يفتح الرابط داخل iframe محدد، يجب أن تتطابق قيمة _____ في الرابط مع قيمة _____ في الـ iframe.
(أ) src مع href. (ب) target مع name. (ج) id مع class. (د) alt مع title.

الإجابة: (ب) target مع name. (نضع اسم الإطار في خاصية target للرابط).

الحماية والأمان (Sandbox Attribute)

تضمين محتوى خارجي يمثل خطراً أمنياً محتملاً، لأن الصفحة المضمنة قد تحتوي على أكواد خبيثة، أو تحاول سرقة بيانات، أو تفتح نوافذ منبثقة (Pop-ups) مزعجة. هنا يأتي دور خاصية sandbox.

كيف يعمل Sandbox؟

  • عند إضافة كلمة sandbox فقط للوسم، يتم تفعيل أقصى درجات القيود. يتم منع السكربتات (JS)، منع النماذج (Forms)، ومنع النوافذ المنبثقة.
  • يمكنك تخفيف هذه القيود بإضافة قيم محددة داخل الخاصية (سماحيات).
  • يعتبر هذا "صندوق رملي" يعزل الكود المضمن عن موقعك الأصلي لحمايته.

قيم Sandbox المتاحة

القيمة (Value) الوظيفة (السماحية)
(فارغة) sandbox="" تطبق جميع القيود (لا سكربتات، لا نماذج، لا وصول للكوكيز).
allow-scripts تسمح بتشغيل ملفات JavaScript داخل الإطار (ولكن لا تسمح بتغيير محتوى النافذة الأم).
allow-same-origin تسمح للإطار بأن يُعامل وكأنه من نفس الموقع (يسمح بالوصول للكوكيز والتخزين المحلي). *خطر إذا كان المصدر غير موثوق*.
allow-forms تسمح بإرسال البيانات عبر النماذج (Forms) داخل الإطار.
allow-popups تسمح للصفحة المضمنة بفتح نوافذ منبثقة (مثل window.open).
allow-top-navigation تسمح للصفحة المضمنة بتغيير رابط الصفحة الرئيسية (الأم) كاملة.

مثال (4): استخدام Sandbox

كود Iframe محمي بخصائص Sandbox 

<!-- إطار مقيد تماماً: لا جافاسكريبت ولا نماذج -->
<iframe src="unknown_site.html" sandbox></iframe>

<!-- إطار يسمح فقط بالجافاسكريبت والنماذج -->
<iframe 
    src="game_app.html" 
    sandbox="allow-scripts allow-forms">
</iframe>

اختر - إذا قمت بإضافة خاصية sandbox للـ iframe ولكنك أردت السماح بتشغيل أكواد JavaScript بداخله، ماذا تضيف؟
(أ) allow-js. (ب) enable-scripts. (ج) allow-scripts. (د) no-sandbox.

الإجابة: (ج) allow-scripts. (هذه القيمة تفتح القيد الخاص بالسكربتات).

تضمين الوسائط (YouTube & Maps) والتحميل الكسول

أكثر استخدامات الـ iframe شيوعاً هو تضمين فيديوهات يوتيوب وخرائط جوجل. توفر هذه المنصات أكواد جاهزة للنسخ، ولكن من المهم فهم بعض الخصائص الإضافية.

تضمين يوتيوب وسمات خاصة

  • allowfullscreen: هذه الخاصية تسمح للفيديو بأن يملأ الشاشة عند الضغط على زر التكبير. بدونها لن يعمل زر Fullscreen.
  • الخاصية loading="lazy": هذه خاصية حديثة ورائعة للأداء. تعني أن المتصفح لن يقوم بتحميل محتوى الـ iframe إلا عندما ينزل المستخدم (Scroll) ويقترب من مكان الإطار. هذا يسرع تحميل صفحتك بشكل كبير جداً.

مثال (5): فيديو يوتيوب مع تحميل كسول

كود تضمين فيديو يوتيوب 

<!-- تضمين فيديو يوتيوب -->
<iframe 
    width="560" 
    height="315" 
    src="https://www.youtube.com/embed/VIDEO_ID" 
    title="YouTube video player" 
    frameborder="0" 
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
    allowfullscreen
    loading="lazy">
</iframe>

<!-- تضمين خريطة جوجل -->
<iframe 
    src="https://www.google.com/maps/embed?..." 
    width="600" 
    height="450" 
    style="border:0;" 
    allowfullscreen="" 
    loading="lazy">
</iframe>

اختر - ما فائدة استخدام الخاصية loading="lazy" مع الـ iframe؟
(أ) تمنع تحميل الفيديو نهائياً. (ب) تسرع تحميل الصفحة بتأجيل تحميل الإطار حتى يصل المستخدم إليه. (ج) تجعل الفيديو يعمل ببطء. (د) تقوم بتشغيل الفيديو تلقائياً.

الإجابة: (ب) تسرع تحميل الصفحة بتأجيل تحميل الإطار حتى يصل المستخدم إليه. (تحسين الأداء Performance).