3.6 KiB
title | localeTitle |
---|---|
Iframes | نوافذ الأطر المدمجة |
نوافذ الأطر المدمجة
يمثل عنصر HTML <iframe>
إطار مضمّن ، مما يسمح لك بتضمين مستند HTML مستقل في مستند HTML الحالي. يتم استخدام <iframe>
عادةً لتضمين الوسائط التابعة لجهات خارجية أو الوسائط الخاصة بك أو الأدوات أو مقتطفات الشفرة أو تضمين تطبيقات صغيرة تابعة لجهات أخرى مثل نماذج الدفع.
سمات
فيما يلي بعض خصائص <iframe>
:
| السمة | الوصف | | --- | --- | | allowfullscreen
| اضبط على true للسماح بوضع الإطار في وضع ملء الشاشة | frameborder
| يروي المتصفح لرسم حدود حول الإطار (مضبوطا على 1 افتراضيا) | height
ارتفاع الإطار في CSS بكسل | | name
| اسم للإطار | | src
| عنوان URL لصفحة الويب لتضمين | | width
| عرض الإطار في CSS بكسل |
أمثلة
تضمين فيديو YouTube مع <iframe>
:
`
`تضمين خرائط Google مع <iframe>
:
`
`نص بديل
يتم استخدام المحتوى بين علامتي الفتح <iframe>
كنص بديل ، ليتم عرضه إذا كان متصفح المشاهد لا يدعم iframe.
`
`استهداف إطار Iframe في ارتباط
يمكن لأي رابط <a>
أن يستهدف محتوى عنصر <iframe>
. بدلاً من إعادة توجيه نافذة المتصفح إلى صفحة الويب المرتبطة ، سيعيد توجيه <iframe>
. لكي يعمل هذا ، يجب أن تتطابق السمة target
للعنصر <a>
مع سمة name
الخاصة بـ <iframe>
.
`
`سيعرض هذا المثال علامة <iframe>
فارغة في البداية ، ولكن عند النقر على الرابط أعلاه ، سيعيد توجيه <iframe>
لعرض فيديو YouTube.
جافا سكريبت و Iframes
يمكن للوثائق المضمنة في <iframe>
تشغيل JavaScript داخل السياق الخاص بها (دون التأثير على صفحة ويب الأصل) كالمعتاد.
يخضع أي تفاعل في النص البرمجي بين صفحة الويب الرئيسية ومحتوى <iframe>
إلى نفس سياسة الأصل. وهذا يعني أنه في حالة تحميل محتوى <iframe>
من نطاق مختلف ، فسيحظر المتصفح أي محاولة للوصول إلى هذا المحتوى باستخدام JavaScript.
معلومات اكثر:
انظر MDN Web Docs .