علامة <iframe> في HTML

  • الصفحة السابقة <i>
  • الصفحة التالية <img>

التعريف والاستخدام

<iframe> علامة الفريم تعريف الفريم الداخلي (الفريم المدمج).

الفريم يستخدم لدمج مستند آخر داخل مستند HTML الحالي.

نصيحة:استخدم CSS لضبط <iframe> التصميم (انظر الأمثلة أدناه).

نصيحة:من الأفضل دائمًا أن تكون <iframe> يحتوي على خصائص title. يمكن للقراءات التلقائية استخدام هذه الخاصية لقراءة معلومات <iframe> وصف المحتوى.

انظر أيضًا:

دليل تعليمات HTML:Iframe HTML

دليل DOM HTML:مفهوم الفريم

مثال

مثال 1

علامة الفريم داخلي كما يلي:

<iframe src="https://www.codew3c.com" title="CodeW3C.com فيديو تعليمي"></iframe>

تجربة بنفسك

مثال 2

إضافة وإزالة حواف iframe (استخدام CSS):

<iframe src="/index.asp" width="100%" height="300" style="border:1px solid black;">
</iframe>
<iframe src="/index.asp" width="100%" height="300" style="border:none;">
</iframe>

تجربة بنفسك

الخصائص

الخصائص القيمة وصف
allow يحدد استراتيجية الوظيفة ل <iframe> .
allowfullscreen
  • true
  • false
 إذا كان يمكن ل <iframe> تفعيل الوضع الكامل عبر استدعاء طريقة requestFullscreen()، يتم تعيينه على true.
allowpaymentrequest
  • true
  • false
 إذا كان يسمح بتحويل <iframe> عبر المصادر المتعددة إلى API طلب الدفع، يتم تعيينه على true.
طول البكسل يحدد طول <iframe> . طول افتراضي هو 150 بكسل.
loading
  • eager
  • lazy
 يحدد ما إذا كان يجب على المتصفح تحميل iframe على الفور أم تأخير التحميل حتى ت满足了 بعض الشروط.
name نص يحدد اسم <iframe> .
referrerpolicy
  • no-referrer
  • no-referrer-when-downgrade
  • origin
  • origin-when-cross-origin
  • same-origin
  • strict-origin-when-cross-origin
  • unsafe-url
 يحدد المعلومات المرجعية التي يجب إرسالها عند الحصول على iframe .
sandbox
  • allow-forms
  • allow-pointer-lock
  • allow-popups
  • allow-same-origin
  • allow-scripts
  • allow-top-navigation
 يتم تمكين سلسلة من القيود الإضافية على محتوى <iframe> .
src URL يحدد عنوان المستند الذي يجب إدراجه داخل <iframe> .
srcdoc كود HTML يحدد محتوى HTML للصفحة التي يجب عرضها داخل <iframe> .
عرض البكسل يحدد عرض <iframe> . عرض افتراضي هو 300 بكسل.

خصائص عامة

<iframe> يدعم العنصر خصائص العالمية في HTML.

خصائص الحدث

<iframe> يدعم العنصر خصائص الحدث في HTML.

إعدادات CSS الافتراضية

سيستخدم معظم المتصفحات القيم التالية كقيم افتراضية <iframe> عنصر:

iframe:focus {
  outline: none;
}
iframe[seamless] {
  display: block;
}

دعم المتصفحات

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
الدعم الدعم الدعم الدعم الدعم
  • الصفحة السابقة <i>
  • الصفحة التالية <img>