HTML: iframe في HTML

يسمح لك <iframe> (إطار مضمن) بتضمين صفحة HTML أخرى داخل الصفحة الحالية. سواءً كان تضمين مقاطع فيديو أو خرائط أو صفحات ويب أخرى، فإن iframe أداة لا غنى عنها في تطوير الويب.

1. أساسيات iframe

استخدم <iframe src="URL"></iframe> لتضمين صفحة ويب أخرى في الصفحة الحالية. السمتان width و height تتحكمان في أبعاد العرض:

▶ مثال

<!-- تضمين صفحة بسيطة، عرض 600px، ارتفاع 400px -->
<iframe src="https://example.com" width="600" height="400">
متصفحك لا يدعم iframe.
</iframe>

2. شرح سمات iframe

توفر iframe عدة سمات للتحكم في سلوك التضمين:

• src — عنوان URL للصفحة المراد تضمينها
• width / height — تعيين أبعاد iframe بالبكسل
• title — توفير وصف لـ iframe؛ مهم جدًا لقارئات الشاشة
• name — إعطاء iframe اسمًا، يمكن استخدامه كـ target للروابط (<a>)

سمة name مع target تتيح للروابط الفتح داخل iframe:

<!-- iframe مسمى -->
### ▶ مثال
<iframe src="about:blank" name="content-frame"
width="100%" height="300"></iframe>

<!-- الروابط تفتح داخل iframe عبر target -->
<a href="https://www.wikipedia.org" target="content-frame">
فتح ويكيبيديا في iframe
</a>
<a href="https://www.example.com" target="content-frame">
فتح مثال في iframe
</a>

3. أمان iframe — سمة sandbox

سمة sandbox تفرض قيودًا إضافية على المحتوى داخل iframe وهي إجراء أمني مهم. يمكنها تقييد إرسال النماذج والنوافذ المنبثقة وتنفيذ البرامج النصية والسلوكيات الأخرى:

• sandbox="" (فارغة) — تفعيل جميع القيود، أكثر أشكال التقييد
• sandbox="allow-scripts" — يسمح بتنفيذ البرامج النصية، لكن يمنع السلوكيات الأخرى
• sandbox="allow-scripts allow-forms" — يسمح بالبرامج النصية وإرسال النماذج

<!-- أقصى تقييد: تعطيل جميع الميزات المتقدمة -->
<iframe src="https://example.com" sandbox=""></iframe>

<!-- السماح بالبرامج النصية، لكن منع إرسال النماذج والنوافذ المنبثقة -->
<iframe src="https://example.com" sandbox="allow-scripts"></iframe>

<!-- السماح بالبرامج النصية والنماذج، لكن لا يزال يمنع النوافذ المنبثقة والتنقل -->
<iframe src="https://example.com"
sandbox="allow-scripts allow-forms"></iframe>

4. تضمين محتوى طرف ثالث

الاستخدام الأكثر شيوعًا لـ iframe في العالم الحقيقي هو تضمين المحتوى من خدمات الطرف الثالث، مثل فيديوهات YouTube وخرائط Google:

<!-- تضمين فيديو YouTube -->
<iframe width="560" height="315"
src="https://www.youtube.com/embed/VIDEO_ID"
### ▶ مثال
title="مشغل فيديو YouTube"
allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>

<!-- تضمين خريطة Google -->
<iframe width="600" height="450"
src="https://www.google.com/maps/embed?pb=..."
title="خريطة Google"
allowfullscreen
loading="lazy"></iframe>

عند تضمين محتوى طرف ثالث، توفر المنصات عادةً كود iframe جاهزًا في خيارات المشاركة/التضمين — تحتاج فقط إلى النسخ واللصق. تأكد من تضمين سمة title و loading="lazy"" لتحسين أداء التحميل.

5. نظرة عامة على التواصل بين iframe والصفحة الأب

عندما يشترك iframe والصفحة الأب في نفس المصدر (نفس البروتوكول والنطاق والمنفذ)، يمكنك الوصول مباشرة إلى DOM بعضكما البعض عبر JavaScript. للسيناريوهات عبر النطاقات، يوفر HTML5 واجهة postMessage للتواصل الآمن:

<!-- الصفحة الأب ترسل رسالة -->
<iframe src="https://other-domain.com/page"
id="myFrame" title="صفحة عبر النطاقات"></iframe>
<script>
var frame = document.getElementById('myFrame');
frame.contentWindow.postMessage('مرحباً، iframe!', 'https://other-domain.com');
</script>

<!-- داخل iframe، استلام الرسالة (يجب أن يكون في الصفحة المضمنة) -->
<script>
window.addEventListener('message', function(event) {
// تحقق دائمًا من المصدر!
if (event.origin !== 'https://parent-domain.com') return;
console.log('تم الاستلام:', event.data);
});
</script>

🔒 نصيحة أمنية: عند استخدام postMessage، لا تثق أبدًا في أي شيء يتجاوز event.origin. تحقق دائمًا من مصدر الرسالة لتجنب إرسال بيانات حساسة إلى نطاقات غير موثوقة.

❓ أسئلة شائعة

📖 ملخص

• <iframe> يضمّن صفحة HTML أخرى داخل الصفحة الحالية
• src يحدد عنوان التضمين؛ width/height يتحكمان في الأبعاد
• title يوفر وصفًا لإمكانية الوصول؛ name يعمل مع سمة target
• sandbox يقيد الوظائف داخل iframe لتعزيز الأمان
• YouTube وخرائط Google ومحتوى طرف ثالث آخر يُضمّن عادةً عبر iframe
• postMessage يتيح التواصل عبر النطاقات بين الصفحات الأب والابن

📝 تمارين

1. ضمّن أول فيديو لك: ابحث عن فيديو YouTube، انسخ كود التضمين الخاص به، والصقه في ملف HTML الخاص بك. تأكد من إضافة سمة title و loading="lazy".
2. تجربة Sandbox: أنشئ iframe، ابدأ بـ sandbox="" (أكثر وضع تقييدًا)، ثم فعّل تدريجيًا allow-scripts و allow-forms، ولاحظ كيف يتغير السلوك.

فريق Web-Tutorial التقني

منصة دروس برمجية يديرها عدة مطورين. كل درس يتم كتابته ومراجعته بواسطة مطورين متخصصين في المجال. نعمل على ضمان دقة وموثوقية المحتوى — إذا لاحظت أي مشكلة، فيرجى إخبارنا.

من نحن