انتقل إلى محتوى الدرس

Iframe Accessibility and Lazy Load أفضل ممارسات الإتاحة وأداء التحميل

تعلم تضمين الصفحات المتداخلة باستخدام عنصر iframe في HTML: أتقن ضبط أبعاد الإطار، وتوجيه الروابط، وعزل الشيفرات عبر خاصية sandbox، وضبط سياسات الأذونات وميزات الأجهزة وتأخير التحميل.
5 صفوف تعليمية
لغة HTML
10,759 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي
تمثل الإتاحة الرقمية متطلباً تقنياً وقانونياً جوهرياً لكافة الإطارات المتداخلة. تعتمد قارئات الشاشة والتقنيات المساعدة على خاصية title لإعلان محتوى الإطار ووظيفته للمستخدمين ذوي الإعاقة البصرية؛ ويؤدي غياب هذا العنوان أو كتابة أسماء مبهمة إلى حرمانهم من فهم سياق الصفحة.
الصف 2 شرح توضيحي
لتحسين سرعة تحميل الصفحة وتوفير استهلاك باقات البيانات، يوفر معيار الويب خاصية التحميل الكسول الأصيلة loading="lazy". يعمل المتصفح بموجبها على تأخير جلب بيانات الإطارات البعيدة عن شاشة العرض الحالية حتى يقترب المستخدم بالتمرير نحو موضعها.
الصف 3 كود برمجي
HTML
<!-- Production-ready accessible iframe -->
<iframe
  src="/courses.html"
  title="Interactive System Performance Board"
  loading="lazy"
  sandbox="allow-scripts"
  width="800"
  height="450">
</iframe>
الصف 4 ملاحظة هامة
الصف 5 ملاحظة هامة
خلاصة المعرفة ومحطة الانتقال

ملخص الدرس

حصاد الدرس

مراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي

ماذا تعلّمت في هذا الدرس؟

ملخص الدرس: أتقنت في هذا الدرس مفهوم الإطارات المتداخلة iframe، والتحكم في الأبعاد والحدود، وتوجيه الروابط نحو الإطار، وجدار العزل الأمني sandbox، وضبط سياسات الأذونات allow، وعناوين الإتاحة والتحميل الكسول. الخطوة التالية تنقلنا إلى غرفة التحكم الخفية للمستند في درس رأس الصفحة head.