شرح شامل لعناصر iframe وobject وembed في HTML وطريقة استخدامها في تضمين المحتوى
في هذا الدرس سنتعرف على كيفية استخدام عناصر الإطارات في HTML مثل
iframe وobject وembed، والتي تُستخدم لتضمين صفحات ويب أو وسائط متعددة داخل صفحة HTML رئيسية. هذه
العناصر تُعتبر من الأدوات المهمة التي يحتاجها كل مطور ويب لإنشاء محتوى
تفاعلي وعرض مصادر خارجية مباشرة داخل الموقع.
ما هو عنصر iframe في HTML؟
عنصر iframe يُستخدم لتضمين صفحة ويب داخل صفحة أخرى.
هذا العنصر له وسم فتح ووسم إغلاق بالشكل التالي:
<iframe src="https://example.com"></iframe>
أهم الخصائص التي يمكن استخدامها مع iframe:
-
src: تحدد الرابط (URL) الذي سيتم تضمينه داخل الصفحة.
-
width و height: لتحديد عرض وارتفاع الإطار.
-
frameborder: يمكن استخدامه لإخفاء أو إظهار الحدود (0 لإخفاء الحدود، 1 لإظهارها).
-
scrolling: للتحكم في ظهور أشرطة التمرير (yes/no/auto).
-
title: لتحديد وصف للمحتوى المضمن (مفيد لتحسين الوصولية).
مثال عملي:
<iframe src="https://example.com" width="100%" height="500" frameborder="0" scrolling="no" title="Embedded Website"></iframe>
تضمين الوسائط باستخدام iframe
يمكن استخدام iframe لتضمين أنواع مختلفة من المحتوى
مثل:
-
مواقع خارجية (إذا كانت تسمح بذلك)
-
ملفات PDF
-
فيديوهات من YouTube
-
صور
-
ملفات صوتية
لكن من المهم معرفة أن بعض المواقع مثل Facebook لا تسمح بالتضمين عبر iframe لأسباب أمنية (سياسة X-Frame-Options).
التحكم في مظهر iframe
يمكنك التحكم في حجم الإطار وحدوده باستخدام CSS أو من خلال الخصائص المباشرة:
<iframe src="file.pdf" width="600" height="400" style="border: none;"></iframe>
كما يمكن إخفاء أشرطة التمرير:
<iframe src="file.pdf" scrolling="no"></iframe>
الفرق بين iframe وobject وembed
| الخاصية | iframe | object | embed |
|---|---|---|---|
| تضمين صفحات ويب | نعم | نعم | لا |
| يدعم الوسائط المتعددة | نعم | نعم | نعم |
| مرونة التحكم | عالي | محدود | محدود |
| دعم CSS وJS | ممتاز | يتطلب إعدادات إضافية | محدود |
| عرض الحدود بشكل افتراضي | نعم | لا | لا |
استخدام عنصر object
عنصر object يُستخدم أيضًا لتضمين المحتوى الخارجي،
ولكنه يختلف عن iframe بأنه يستخدم خاصية
data بدلًا من src.
مثال:
<object data="https://example.com" width="100%" height="500"></object>
يمكن أيضًا استخدامه لتضمين ملفات PDF أو فيديوهات، لكن يعتمد تشغيله على دعم المتصفح أو توفر الإضافات المناسبة.
استخدام عنصر embed
عنصر embed يُستخدم لتضمين ملفات الوسائط مثل الفيديو
والصوت:
مثال على تضمين فيديو:
<embed src="video.mp4" width="800" height="450">
مثال على تضمين ملف PDF:
<embed src="file.pdf" width="600" height="400" type="application/pdf">
عرض فيديو من YouTube باستخدام iframe
YouTube يُوفر كود جاهز لتضمين أي فيديو من خلال iframe، ويمكن نسخه مباشرة من زر "مشاركة" ثم "تضمين".
مثال:
<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; web-share"
allowfullscreen></iframe>
في هذا الكود يتم استخدام بعض الخصائص المهمة:
-
allowfullscreen: للسماح بعرض الفيديو بكامل الشاشة.
-
allow: لتحديد الصلاحيات الممنوحة مثل التشغيل التلقائي والتحكم.
روابط ديناميكية داخل iframe
يمكنك استخدام خاصية name في iframe مع خاصية
target في رابط HTML، لعرض صفحة أو رابط داخل نفس
iframe عند النقر عليه.
مثال عملي:
<iframe name="myframe" width="600" height="400"></iframe>
<a href="page.html" target="myframe">عرض الصفحة داخل الإطار</a>
تضمين صفحات داخلية
يمكنك تضمين صفحات HTML داخلية موجودة في نفس مجلد المشروع بسهولة باستخدام مسارات نسبية:
<iframe src="about.html" width="100%" height="400"></iframe>
ملاحظات مهمة
-
يُفضل استخدام
iframeعند الحاجة لتضمين محتوى خارجي بشكل مرن. -
يُنصح باستخدام CSS بدلًا من الخصائص المباشرة مثل
widthوheightلتحقيق تنسيقات احترافية. -
تأكد من أن الموقع الذي تريد تضمينه يسمح بذلك (قد يتم منعه من خلال إعدادات الأمان).
-
تجنب استخدام
embedوobjectفي عرض الصفحات، لأن دعمها ضعيف في بعض المتصفحات والأجهزة.
بهذا نكون قد استعرضنا بشكل شامل كيفية استخدام عناصر
iframe، object، وembed
في HTML، وتعلمنا كيف نُدرج من خلالها صفحات ومحتوى خارجي داخل مواقعنا. يُنصح
دائمًا بتجربة كل عنصر وفهم سلوكه على مختلف المتصفحات لضمان أفضل أداء وتجربة
استخدام.