iFrame

ما هو ifram ؟

يتم استخدام إطار iframe لعرض الكائنات الخارجية بما في ذلك صفحات الويب الأخرى داخل صفحة الويب. يعمل iframe إلى حد كبير مثل متصفح الويب المصغر داخل متصفح الويب. أيضًا ، المحتوى داخل iframe موجود بشكل مستقل تمامًا عن العناصر المحيطة.
المثال التالي يوضح الصيغة الأساسية لإضافة iframe إلى صفحة الويب:

بناء الجملة
  1. <iframe src="url"></iframe>

يشير عنوان URL المحدد في سمة src إلى موقع كائن خارجي أو صفحة ويب.
يعرض المثال التالي ملف "hello.html" داخل iframe في نفس صفحة الويب.

مثال
تشغيل
  1. <iframe src="examples/pages/hello.html"></iframe>

تحديد عرض (width) وارتفاع (height) iFrame

تُستخدم السمات height و width لتحديد ارتفاع وعرض إطار iframe.

مثال
تشغيل
  1. <iframe src="examples/pages/hello.html" width="400" height="200"></iframe>

يمكننا أيضًا استخدام CSS لتحديد عرض وارتفاع iframe ، كما هو موضح هنا:

مثال
تشغيل
  1. <iframe src="examples/pages/hello.html" style="width: 400px; height: 200px;"></iframe>
ملاحظة:

يتم تحديد قيم السمات width و height بالبكسل افتراضيًا ، ولكن يمكننا أيضًا تحديد هذه القيم كنسبة مئوية ، مثل 50٪ و 100٪ وما إلى ذلك. يبلغ العرض الافتراضي لإطار iframe 300 بكسل ، بينما يبلغ الارتفاع الافتراضي 150 بكسل.

إزالة حدود الإطارات الافتراضية من iframe

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

مثال
تشغيل
  1. <iframe src="examples/pages/hello.html" style="border: none;"></iframe>

وبالمثل ، يمكنك استخدام الخاصية border لإضافة الحدود التي تختارها إلى iframe. سيعرض المثال التالي إطار iframe بحد أزرق 2 بكسل.

مثال
تشغيل
  1. <iframe src="examples/pages/hello.html" style="border: 2px solid blue;"></iframe>

استخدام iFrame كهدف للرابط التشعبي

يمكننا أيضًا استخدام iframe كهدف للروابط التشعبية.
يمكن تسمية iframe باستخدام السمة name . هذا يعني أنه عند النقر فوق الرابط الذي يحتوي على السمة target المحتوية هذا الاسم كقيمة ، سيتم فتح محتوى الرابط في iframe.
دعنا نجرب مثالًا لفهم كيفية عمله:

مثال
تشغيل
  1. <iframe src="examples/pages/hello.html" name="myFrame"></iframe>
  2. <p><a href="http://educationfactorys.com/" target="myFrame">Education Factory</a></p>
« التالي السابق »