شرح iframe و object و embed في HTML بالتفصيل وطرق استخدامهم لعرض المحتوى الخارجي
في HTML، بنحتاج ساعات نعرض محتوى خارجي زي فيديو، ملف PDF، موقع، أو وسائط تانية. وعشان نعمل كده، عندنا تلات عناصر أساسية: iframe و object و embed.
عنصر <iframe>
الـ iframe هو إطار بنستخدمه لعرض موقع أو ملف داخل الصفحة.
<iframe
src="https://www.w3schools.com"
width="100%"
height="400"
title="موقع W3Schools"
style="border:1px solid #ccc;"
loading="lazy">
</iframe>الخصائص:
- src: الرابط أو المسار.
- width / height: أبعاد الإطار.
- title: وصف العنصر.
- allowfullscreen: لتشغيل الفيديو بكامل الشاشة.
- name: لتحديد Target.
target في iframe:
<iframe name="myFrame" width="100%" height="300"></iframe>
<a href="https://example.com" target="myFrame">افتح داخل الإطار</a>عنصر <object>
يستخدم object لعرض ملفات PDF أو صفحات ويب أو وسائط تانية.
<object
data="file.pdf"
type="application/pdf"
width="100%"
height="500"
title="عرض ملف">
لا يمكن عرض الملف، يرجى تحميله.
</object>عنصر <embed>
عنصر بسيط يستخدم لعرض الملفات داخل الصفحة.
<embed
src="file.pdf"
type="application/pdf"
width="100%"
height="500"
title="PDF">مقارنة:
| العنصر | الاستخدام | محتوى بديل | أفضل في |
|---|---|---|---|
| iframe | المواقع / الفيديو | لا | المواقع / اليوتيوب |
| object | PDF / HTML | نعم | PDF + محتوى بديل |
| embed | وسائط | لا | ملفات سريعة |
خلاصة:
استخدم iframe لعرض المواقع والفيديوهات، وobject أو embed للـ PDF أو الملفات الأخرى. ولا تنسى تحديد title لكل عنصر لتحسين الوصول وتجربة المستخدم.