شرح وسم iframe في HTML بالعربي — تضمين محتوى خارجي

السابق التالي

هل رأيت يوماً فيديو يوتيوب مُضمَّناً في مقال على أحد مواقع الإنترنت؟ أو خريطة جوجل تظهر مباشرة داخل صفحة "تواصل معنا"؟ كل هذا يتم بوسم واحد فقط اسمه <iframe> — وهو اختصار لـ Inline Frame أي "الإطار المدمج".

تخيّل الأمر كنافذة تفتحها في جدار غرفتك. أنت في غرفتك (صفحتك)، لكن من خلال تلك النافذة ترى منظراً من مكان آخر تماماً (موقع آخر). هذا هو الـ <iframe> بالضبط.

الصيغة الأساسية

وسم <iframe> بسيط جداً — تُعطيه رابط المحتوى الخارجي وتُحدد حجم النافذة:

<iframe
    src="https://www.example.com"
    width="800"
    height="450"
    title="وصف المحتوى المضمن">
</iframe>

src: رابط URL للمحتوى الخارجي الذي تريد تضمينه.
width و height: أبعاد الإطار بالبكسل.
title: وصف نصي لما بداخل الإطار — ضروري للإمكانية الوصول (Accessibility) وجوجل.

المثال الأكثر استخداماً: تضمين فيديو يوتيوب

يوتيوب يُزوّدك تلقائياً بكود <iframe> جاهز لكل فيديو. فقط اذهب لأي فيديو → زر المشاركة → "تضمين" (Embed). ستجد كوداً مشابهاً لهذا:

<iframe
    width="560"
    height="315"
    src="https://www.youtube.com/embed/VIDEO_ID"
    title="شرح HTML من الصفر بالعربي"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen>
</iframe>

لاحظ أن يوتيوب يستخدم رابط youtube.com/embed/... وليس رابط الفيديو العادي. هذا ضروري — الرابط العادي لن يعمل داخل <iframe>.

مثال آخر: تضمين خريطة جوجل

اذهب إلى Google Maps → ابحث عن الموقع الذي تريده → زر "المشاركة" → تبويب "تضمين خريطة" → انسخ الكود. ستحصل على شيء مثل:

<iframe
    src="https://www.google.com/maps/embed?pb=..."
    width="600"
    height="450"
    style="border:0;"
    allowfullscreen=""
    loading="lazy"
    title="موقع مكتبنا على الخريطة">
</iframe>

جميع الخصائص المهمة

الخاصية	ماذا تفعل؟
`src`	رابط URL للمحتوى المراد تضمينه — ضروري
`width` / `height`	أبعاد الإطار بالبكسل أو بالنسبة المئوية
`title`	وصف المحتوى لمحركات البحث وأدوات قراءة الشاشة — مهم جداً
`allowfullscreen`	يسمح للمستخدم بفتح المحتوى على الشاشة الكاملة
`loading="lazy"`	يُؤجل تحميل الإطار حتى يقترب المستخدم منه — يُسرّع الصفحة
`frameborder="0"`	يُزيل الإطار المرئي حول الـ iframe (استُبدل بـ CSS لكنه لا يزال شائعاً)
`sandbox`	يُقيّد ما يمكن للمحتوى المضمن فعله — يزيد الأمان

تنبيه أمني مهم

<iframe> قوي لكنه يحتاج انتباهاً أمنياً. إليك ما يجب أن تعرفه:

لا تُضمّن مواقع مجهولة: الكود الموجود داخل الـ iframe يُنفَّذ في متصفح الزائر. موقع خبيث قد يحاول سرقة بياناته.
بعض المواقع ترفض التضمين: مواقع كثيرة (مثل جوجل نفسه، فيسبوك) تمنع فتحها داخل iframe عبر ترويسة أمنية اسمها X-Frame-Options. ستشاهد الإطار فارغاً أو يظهر خطأ.
استخدم sandbox للحماية: عند تضمين محتوى لا تثق به 100%، أضف الخاصية sandbox لتقييد صلاحياته.

<!-- iframe محمي بـ sandbox -->
<iframe
    src="https://example.com"
    sandbox="allow-scripts allow-same-origin"
    title="محتوى خارجي محمي">
</iframe>

مثال عملي كامل: صفحة تواصل معنا

إليك كيف تبدو صفحة "تواصل معنا" احترافية تضم خريطة جوجل ومعلومات التواصل:

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>تواصل مع DevArabi</title>
</head>
<body>

    <h1>تواصل معنا</h1>

    <p>يسعدنا تواصلك معنا. يمكنك زيارتنا في المكان التالي:</p>

    <!-- خريطة جوجل مضمّنة -->
    <iframe
        src="https://www.google.com/maps/embed?pb=..."
        width="100%"
        height="400"
        style="border:0;"
        allowfullscreen=""
        loading="lazy"
        title="موقع مكتب DevArabi">
    </iframe>

    <address>
        <p>العنوان: شارع الملك فهد، الرياض، المملكة العربية السعودية</p>
        <p>البريد الإلكتروني: <a href="mailto:info@devarabi.com">info@devarabi.com</a></p>
    </address>

</body>
</html>

الأسئلة الشائعة — FAQ

لماذا يظهر الـ iframe فارغاً أو يعطي خطأ؟

الموقع الذي تحاول تضمينه يمنع عرضه داخل iframe. هذا قرار يتخذه أصحاب الموقع لحماية المستخدمين — لا تستطيع تجاوزه. الحل: استخدم الرابط العادي بدلاً من التضمين.

هل يمكنني جعل الـ iframe يملأ العرض الكامل؟

نعم. استخدم width="100%" وحدد الارتفاع بـ CSS. هذا مفيد كثيراً خاصة للشاشات المختلفة.

هل الـ iframe يؤثر على سرعة الصفحة؟

نعم — كل iframe يعني طلب HTTP إضافي وتحميل صفحة كاملة. الحل هو إضافة loading="lazy" دائماً. هذا يُؤجل التحميل حتى يصل المستخدم لذلك الجزء من الصفحة.

لماذا يوتيوب يعطيني رابطاً بـ /embed/ وليس الرابط العادي؟

الرابط العادي لصفحة يوتيوب يحتوي واجهة كاملة (قائمة، تعليقات، توصيات...). رابط /embed/ يُعطيك فقط مشغل الفيديو المجرد، خفيف وأنيق ومناسب للتضمين.

ممتاز! أتقنت الآن كيف تُضمّن أي محتوى خارجي في صفحتك. في الدرس القادم، سنتعلم المراجع (Entities) — كيف تكتب الرموز والأحرف الخاصة في HTML مثل © و <.

السابق التالي

DevArabi

دورة تعلم HTML