logo

إطارات HTML

يتم استخدام HTML Iframe لعرض صفحة ويب متداخلة (صفحة ويب داخل صفحة ويب). HTML

يقوم إطار HTML iframe بتضمين مستند آخر داخل مستند HTML الحالي في المنطقة المستطيلة.

يمكن أن يتفاعل محتوى صفحة الويب ومحتويات iframe مع بعضهما البعض باستخدام JavaScript.

الممثلة زينات أمان

بناء جملة Iframe

يتم تعريف إطار HTML iframe باستخدام

 <iframe src="URL"></iframe> 

هنا، تحدد السمة 'src' عنوان الويب (URL) لصفحة الإطار المضمنة.

قم بتعيين العرض والارتفاع لإطار iframe

يمكنك ضبط عرض إطار iframe وارتفاعه باستخدام سمات 'العرض' و'الارتفاع'. افتراضيًا، يتم تحديد قيم السمات بالبكسل ولكن يمكنك أيضًا تعيينها بالنسبة المئوية. أي 50%، 60% الخ.

تاريخ إصدار أندرويد

مثال: (بكسل)

 <h2>HTML Iframes example</h2> <p>Use the height and width attributes to specify the size of the iframe:</p> <iframe src="https://www.javatpoint.com/"></iframe> 
اختبره الآن

مثال: (النسبة المئوية)

 <h2>HTML Iframes</h2> <p>You can use the height and width attributes to specify the size of the iframe:</p> <iframe src="https://www.javatpoint.com/"></iframe> 
اختبره الآن

يمكنك أيضًا استخدام CSS لتعيين ارتفاع وعرض إطار iframe.

مثال:

 <h2>HTML Iframes</h2> <p>Use the CSS height and width properties to specify the size of the iframe:</p> <iframe src="https://www.javatpoint.com/"></iframe> 
اختبره الآن

قم بإزالة حدود iframe

افتراضيًا، يحتوي إطار iframe على حدود حوله. يمكنك إزالة الحدود باستخدام السمة وخاصية حدود CSS.

مثال:

 <h2>Remove the Iframe Border</h2> <p>This iframe example doesn&apos;t have any border</p> <iframe src="https://www.javatpoint.com/"></iframe> 
اختبره الآن

يمكنك أيضًا تغيير حجم ولون ونمط حدود إطار iframe.

مثال:

 <h2>Custom Iframe Border</h2> <iframe src="https://www.javatpoint.com/"></iframe> 
اختبره الآن

هدف Iframe للارتباط

يمكنك تعيين إطار مستهدف للارتباط باستخدام iframe. يجب أن تشير السمة المستهدفة المحددة للارتباط إلى سمة الاسم الخاصة بإطار iframe.

مثال:

 <h2>Iframe - Target for a Link</h2> <iframe src="new.html" name="iframe_a"></iframe> <p> <a href="https://www.javatpoint.com">JavaTpoint.com</a> </p> <p>The name of iframe and link target must have same value else link will not open as a frame. </p> 
اختبره الآن

انتاج |

إطارات HTML

رمز الإخراج new.hmtl:

 p{ font-size: 50px; color: red;} <p>This is a link below the ifarme click on link to open new iframe. </p> 

تضمين فيديو يوتيوب باستخدام iframe

يمكنك أيضًا إضافة مقطع فيديو على YouTube إلى صفحة الويب الخاصة بك باستخدام

فيما يلي بعض الخطوات لإضافة فيديو YouTube إلى صفحة الويب الخاصة بك:

  • انتقل إلى فيديو YouTube الذي تريد تضمينه.
  • اضغط على مشاركة ➦ أسفل الفيديو.
  • انقر على خيار التضمين.
  • انسخ كود HTML.
  • الصق الكود في ملف HTML الخاص بك
  • تغيير الارتفاع والعرض والخصائص الأخرى (حسب المتطلبات).

مثال:

 <iframe src="https://www.youtube.com/embed/JHq3pL4cdy4" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> <iframe src="https://www.youtube.com/embed/O5hShUO6wxs" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture">></iframe> 
اختبره الآن

انتاج:

str.substring في جافا
إطارات HTML

سمات

اسم السمة قيمة وصف
allowfullscreen إذا كان هذا صحيحًا، فيمكن فتح هذا الإطار في وضع ملء الشاشة.
ارتفاع بكسل فهو يحدد ارتفاع إطار iframe المضمن، والارتفاع الافتراضي هو 150 بكسل.
اسم نص يعطي الاسم إلى iframe. تعد سمة الاسم مهمة إذا كنت تريد إنشاء رابط في إطار واحد.
com.frameborder 1 أو 0 فهو يحدد ما إذا كان يجب أن يكون لإطار iframe حدود أم لا. (غير مدعوم في HTML5).
عرض بكسل فهو يحدد عرض الإطار المضمن، والعرض الافتراضي هو 300 بكسل.
src عنوان URL يتم استخدام السمة src لإعطاء اسم المسار أو اسم الملف والمحتوى الذي سيتم تحميله في iframe.
رمل
تُستخدم هذه السمة لتطبيق قيود إضافية على محتوى الإطار
نماذج السماح فهو يسمح بإرسال النموذج إذا لم يتم استخدام هذه الكلمة الأساسية، فسيتم حظر إرسال النموذج.
السماح بالنوافذ المنبثقة سيتم تمكين النوافذ المنبثقة، وإذا لم يتم تطبيقها فلن يتم فتح أي نافذة منبثقة.
السماح بالبرامج النصية سيمكن البرنامج النصي من التشغيل.
السماح بنفس الأصل إذا تم استخدام هذه الكلمة الأساسية، فسيتم التعامل مع المورد المضمن على أنه تم تنزيله من نفس المصدر.
com.srcdoc يتم استخدام سمة srcdoc لإظهار محتوى HTML في إطار iframe المضمّن. إنه يتجاوز سمة src (إذا كان المتصفح يدعمها).
التمرير
ويشير إلى أن المتصفح يجب أن يوفر شريط تمرير لإطار iframe أم لا. (غير مدعوم في HTML5)
آلي يظهر شريط التمرير فقط إذا كان محتوى iframe أكبر من أبعاده.
نعم يعرض دائمًا شريط التمرير لإطار iframe.
لا لا يُظهر مطلقًا شريط التمرير لإطار iframe.