ما هو iframe؟

<iframe> (الإطار المضمن) هو عنصر HTML يقوم بتضمين صفحة ويب أو مستند آخر داخل الصفحة الحالية. يُنشئ سياقًا للتصفح منفصلًا داخل منطقة مستطيلة من الصفحة، مما يسمح بعرض محتوى من عنوان URL مختلف — مثل خريطة أو فيديو أو أداة تابعة لجهة خارجية — دون أن ينتقل المستخدم بعيدًا عن الصفحة.

يُستخدم iframe بشكل شائع لتضمين مقاطع فيديو YouTube وخرائط Google ونماذج الدفع وأدوات وسائل التواصل الاجتماعي وبانرات الإعلانات. نظرًا لأن المحتوى المضمن يعمل في سياقه الخاص، فإن السمات مثل sandbox و allow تتيح للمطورين التحكم الدقيق في ما يُسمح للصفحة المضمنة بفعله.

وصف الأداة

تقوم هذه الأداة بإنشاء كود HTML <iframe> جاهز للنسخ واللصق من نموذج بسيط. قم بتكوين عنوان URL المصدر والأبعاد وسلوك التمرير واستراتيجية التحميل والأذونات وقيود الحماية، وستقوم الأداة على الفور بإخراج الوسم المقابل. لا حاجة لكتابة السمات يدويًا أو حفظ بناء جملة علم الحماية.

أمثلة

iframe بسيط:

<iframe
  src="https://example.com"
  width="600"
  height="400"
  allowfullscreen
  style="border: none;"
></iframe>

iframe محمّل بطريقة كسولة مع حماية:

<iframe
  src="https://example.com"
  width="800"
  height="500"
  loading="lazy"
  allowfullscreen
  style="border: none;"
  sandbox="allow-scripts allow-same-origin"
></iframe>

iframe مع أذونات الكاميرا والميكروفون:

<iframe
  src="https://meet.example.com"
  width="960"
  height="540"
  allowfullscreen
  style="border: none;"
  allow="camera; microphone; display-capture"
></iframe>

الميزات

  • إنشاء كود <iframe> صحيح من نموذج مرئي — لا تحتاج إلى معرفة HTML
  • التحكم الكامل في الأذونات (allow) وقيود الحماية
  • تحديثات المعاينة المباشرة عند تغيير أي خيار

شرح الخيارات

الخيار الوصف
عنوان URL سمة src — عنوان الصفحة المراد تضمينها
العرض / الارتفاع أبعاد iframe بالبكسل
العنوان تسمية يمكن الوصول إليها (سمة title) لقارئات الشاشة
الاسم سمة name، تُستخدم كهدف ارتباط
التمرير التحكم في شريط التمرير: تلقائي أو دائمًا مفعل أو دائمًا معطل
التحميل eager يحمّل فورًا؛ lazy يؤجل حتى الاقتراب من منطقة العرض
السماح بملء الشاشة يضيف allowfullscreen بحيث يمكن للمحتوى المضمن الانتقال إلى ملء الشاشة
الحد عند عدم التحديد، يضيف style="border: none;" لإزالة الحد الافتراضي
السماح بالميزات منح أذونات API المتصفح المحددة للصفحة المضمنة
أعلام الحماية تقيد ما يمكن للصفحة المضمنة فعله؛ يعيد كل علم تفعيل قدرة محددة

نصائح

  • قدّم دائمًا سمة title لإمكانية الوصول — تعلنها قارئات الشاشة عند التركيز على iframe.
  • استخدم loading="lazy" لـ iframes أسفل الطي لتحسين أداء تحميل الصفحة.
  • إضافة سمة sandbox بدون أعلام تقفل المحتوى تمامًا؛ أضف فقط الأعلام التي تحتاجها فعلًا.