شرح شامل لعنصر <iframe> في HTML
مقدمة عن <iframe>
عنصر <iframe> (إطار داخلي) يسمح بتضمين مستند HTML آخر داخل الصفحة الحالية. يعمل كإطار عائم داخل الصفحة يمكنه عرض محتوى من مصدر خارجي أو داخلي.
البنية الأساسية
<iframe src="URL" width="العرض" height="الارتفاع"></iframe>السمات الرئيسية
السمات الأساسية:
src: يحدد عنوان URL للصفحة المراد تضمينهاwidth: يحدد عرض الإطار بالبكسل أو النسبة المئويةheight: يحدد ارتفاع الإطار بالبكسل أو النسبة المئويةname: يحدد اسم الإطار للاستخدام مع الروابط
سمات الأمان والتحكم:
sandbox: يحدد قيود الأمان على المحتوى (مثال:allow-scripts,allow-forms)allow: يحدد سياسات الأمان الحديثة (مثال:fullscreen,payment)allowfullscreen: يسمح بتشغيل وضع ملء الشاشةloading: يتحكم في التحميل (مثال: lazy للتحميل المتأخر)
سمات أخرى:
title: يحدد وصفًا نصيًا للإطار (مهم لإمكانية الوصول)frameborder: يحدد إذا كان سيظهر حدود للإطار (0 أو 1)scrolling: يحدد إذا كان سيظهر شريط التمرير (auto,yes,no)
أمثلة تطبيقية
مثال بسيط:
<iframe src="https://www.example.com" width="600" height="400"></iframe>مثال مع سمة sandbox:
<iframe src="https://www.example.com" sandbox="allow-scripts allow-forms"></iframe>مثال مع allowfullscreen:
<iframe src="video.html" allowfullscreen></iframe>استخدامات <iframe> الشائعة
- تضمين مقاطع الفيديو (مثل YouTube , Vimeo)
- تضمين الخرائط (مثل خرائط Google)
- تضمين محتوى من مواقع أخرى
- إنشاء تطبيقات ويب معزولة
- عرض الإعلانات
- دمج تطبيقات الطرف الثالث
مثال تضمين فيديو من YouTube
<iframe width="560" height="315"
src="https://www.youtube.com/embed/VIDEO_ID"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>مزايا <iframe>
- عزل المحتوى: لا يتأثر CSS و JavaScript للمحتوى المضمن بالصفحة الرئيسية
- التضمين السهل: يمكن تضمين أي صفحة ويب بسهولة
- الأمان: يمكن التحكم في الصلاحيات عبر سمة
sandbox - الأداء: يمكن تحميل المحتوى بشكل غير متزامن
عيوب <iframe>
- مشاكل SEO: محركات البحث قد تواجه صعوبة في فهرسة المحتوى المضمن
- مشاكل الأداء: إذا تم تحميل عدة
<iframes>قد يتباطأ تحميل الصفحة - مشاكل الأمان: إذا تم تضمين محتوى غير موثوق به
- مشاكل إمكانية الوصول: يحتاج إلى عناية خاصة ليعمل مع قارئات الشاشة
أفضل الممارسات
- استخدم سمة
titleلتحسين إمكانية الوصول - حدد حجمًا ثابتًا: لتجنب مشاكل التخطيط
- استخدم
sandboxلزيادة الأمان - استخدم
loading="lazy"لتحسين الأداء - تجنب
<iframes>المتعددة: لأنها تبطئ الصفحة - تحقق من المحتوى المضمن: للتأكد من أمانه
التوافق مع المتصفحات
يدعم جميع المتصفحات الحديثة عنصر <iframe> بشكل كامل، بما في ذلك:
Chrome
مدعوم بالكامل
Firefox
مدعوم بالكامل
Safari
مدعوم بالكامل
Edge
مدعوم بالكامل
Internet Explorer
منذ الإصدارات القديمة
Opera
مدعوم بالكامل
مثال متكامل:
<iframe src="https://www.example.com"
width="100%"
height="500px"
title="مثال لإطار داخلي"
sandbox="allow-scripts allow-same-origin"
loading="lazy"
allowfullscreen
style="border: 1px solid #ccc; border-radius: 8px;">
<p>متصفحك لا يدعم iframes. يمكنك <a href="https://www.example.com">زيارة الموقع</a> مباشرة.</p>
</iframe>بدائل <iframe> الحديثة
- تضمين JavaScript (مثل خرائط Google أو YouTube API)
- Web Components
- AJAX لتحميل المحتوى ديناميكيًا
- Portals API (تجريبي)
الخلاصة
يظل <iframe> أداة قوية لتضمين المحتوى الخارجي في صفحات الويب، ولكن يجب استخدامه بحكمة مع مراعاة جوانب الأمان والأداء وإمكانية الوصول.
