وسم الإطار المضمّن <iframe>

وسم iframe يضمّن صفحة ويب كاملة داخل صفحتك — فيديوهات يوتيوب، خرائط، ومحتوى خارجي معزول.

نافذة داخل صفحتك تعرض مستندًا آخر بالكامل: مقطع يوتيوب، خريطة Google، معاينة حية. الصفحة المضمنة تعيش في سياق معزول أمنيًّا عن صفحتك (نفس مبدأ عزل محرر الأكواد في هذا الموقع!).

سلاحه الأمني: خاصية sandbox تقيّد قدرات المحتوى المضمّن (منع سكربتات، منع نوافذ منبثقة…) — أساسية عند تضمين محتوى لا تملكه.

الصياغة

<iframe src="https://example.com" width="600" height="400" loading="lazy"></iframe>

⚡ جرّب بنفسك

عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.

🎨 محرّر HTML/CSS

<iframe
  src="https://www.openstreetmap.org/export/embed.html?bbox=35.86,31.93,35.94,31.99"
  width="100%" height="250"
  style="border:0; border-radius:12px"
  loading="lazy"
  title="خريطة عمّان">
</iframe>

النتيجة المباشرة:

أهم الخصائص

الخاصية	الوظيفة
src	عنوان الصفحة المضمنة
sandbox	تقييد قدرات المحتوى — أضف استثناءات محددة مثل allow-scripts عند الحاجة
loading="lazy"	تأجيل تحميل الإطارات البعيدة — الإطارات أثقل عناصر الصفحة غالبًا
title	وصف للإطار تقرؤه قارئات الشاشة — لا تهمله

💡 نصائح عملية

لنسبة عرض ثابتة (فيديو 16:9) استخدم aspect-ratio في CSS بدل الأبعاد الجامدة
بعض المواقع تمنع تضمينها (X-Frame-Options) — إن ظهر إطار فارغ فهذا السبب غالبًا

⚠️ أخطاء شائعة

تضمين محتوى غير موثوق بلا sandbox
إهمال loading="lazy" لإطارات أسفل الصفحة — تكلفة أداء ضخمة مجانية الحل

وسوم ذات صلة

<video> وسم الفيديو <img> وسم الصور

🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار HTML الكامل بالعربي.

📚 للتعمق التقني الكامل بالإنجليزية: MDN Web Docs