إذا سبق لك أن شاهدت مقطع فيديو على يوتيوب مضمنًا داخل منشور مدونة أو تفاعلت مع أداة خرائط جوجل على صفحة الاتصال، فقد رأيت بالفعل إطار iFrame يقوم بعمله.
يُعد عنصر iFrame HTML أحد أكثر أدوات الويب قوةً وهدوءًا، ويستخدمه مطورو الويب وأصحاب المواقع يوميًا لتضمين المحتوى من مصادر خارجية مباشرةً داخل صفحة الويب دون أن يلاحظ المستخدمون أي فرق.
في هذا الدليل، سنشرح بالتفصيل ما هو الإطار المضمن (iFrame) في الواقع، وكيف تعمل السمات الرئيسية، وكيفية إضافته إلى موقعك، وأين يمكن أن تضر الإطارات المضمنة بتحسين محركات البحث أو تخلق مخاطر أمنية إذا لم تكن منتبهًا.
ما هو الإطار المضمن (iframe): شرح الإطار المضمن
الإطار المضمن (iFrame)، وهو اختصار لـ inline frame، هو عنصر HTML يسمح لك بتضمين مستند HTML آخر داخل صفحة الويب الحالية الخاصة بك.
أبسط طريقة لتصورها هي اعتبارها نافذة متصفح صغيرة ومستقلة داخل صفحتك الحالية. يتم تحميل المحتوى الموجود داخل تلك النافذة ويعمل بشكل مستقل تمامًا عن بقية مستند HTML الخاص بك.
لقد كانت إطارات HTML iFrames جزءًا من الويب لعقود، لكنها لا تزال تستخدم بكثافة في تطوير الويب الحديث لأن المشكلة الأساسية التي تحلها لم تتغير.
غالباً ما تحتاج إلى عرض محتوى موجود في مكان آخر دون إرسال المستخدم بعيداً عن صفحتك.
ما يميز عنصر iFrame تقنياً هو أنه يُنشئ سياق تصفح منفصل خاص به. وهذا يعني أن المستند المُضمّن له شجرة DOM خاصة به، ونطاق JavaScript خاص به، CSS .
لا شيء داخل الإطار المضمن يتسرب إلى الصفحة الرئيسية، ولا شيء في الصفحة الرئيسية يتسرب إلى الداخل.
يتم فرض هذا العزل من خلال سياسة المصدر نفسه للمتصفح، والتي تقيد الوصول إلى البرامج النصية عبر السياقات ما لم تشترك كل من الصفحة الأصلية والمستند المضمن في نفس المجال.
هل ترغب في الحصول على ميزات متقدمة على موقع ووردبريس الخاص بك؟
يتطلب تضمين الأدوات والتطبيقات الخارجية والمحتوى الديناميكي إعدادًا دقيقًا. تساعدك شركة Seahawk Media على تنفيذ وظائف موقعك الإلكتروني مع الحفاظ على سرعة وأمان وقابلية توسع موقع WordPress الخاص بك.
ما هي استخدامات الإطارات المضمنة (iframes): أمثلة شائعة من الواقع
يُصادف معظم الناس إطارات HTML المضمنة (iFrames) عدة مرات يوميًا دون أن يدركوا ذلك. هذه التقنية مُدمجة بسلاسة في تصميم مواقع الويب الحديثة لدرجة أنها غير مرئية تقريبًا للزائر العادي. إليك أكثر حالات الاستخدام شيوعًا وعمليةً التي ستصادفها على الإنترنت.
تضمين فيديوهات يوتيوب
هذا هو المثال الأكثر شيوعًا لتقنية iFrame على الإنترنت. فعندما يتم تشغيل فيديو من يوتيوب داخل منشور مدونة أو صفحة منتج، يتم تحميله من خلال إطار iFrame يشير إلى رابط تضمين يوتيوب.
يتم تخزين الفيديو على خوادم يوتيوب ويتم بثه من شبكة توصيل المحتوى، لذا فإن استضافتك لا تتحمل أي تكلفة للنطاق الترددي.
يشاهد الزوار الفيديو مباشرة على صفحتك دون مغادرة الموقع، مما يحافظ على تفاعلهم على موقعك بدلاً من إرسالهم إلى يوتيوب.
عرض خرائط جوجل على صفحات المواقع
تُعرض أي خريطة تفاعلية مُضمنة في موقع ويب عادةً عبر إطار iframe. تُنشئ خرائط جوجل رمز iframe جاهزًا للاستخدام لأي موقع، والذي يمكنك لصقه في مستند HTML الخاص بك.
بالنسبة للشركات المحلية، تُعد هذه إضافة عملية لصفحات الاتصال والموقع، مما يساعد العملاء على الوصول إليك دون مغادرة موقعك.
دمج أدوات الطرف الثالث ونماذج الدفع
بوابات الدفع، وجداول الحجز، وأدوات الدردشة المباشرة، وأدوات الاستطلاع عبر iFrame.
يستضيف المورّد هذه الخاصية على خوادمه الآمنة. تقوم صفحة الويب الخاصة بك بتضمينها عبر عنصر iFrame، مما يعني أن البيانات الحساسة مثل تفاصيل بطاقة الدفع تُعالج بالكامل داخل بيئة المورّد، وليس بيئتك.
يتجنب هذا النهج تطوير الواجهة الخلفية المعقدة ويقلل من مسؤوليتك عن البيانات التي تتم معالجتها.
عرض الإعلانات والموجزات الخارجية
شبكات الإعلانات المصوّرة مثل Google AdSense بعرض الإعلانات من خلال إطارات iframe، مما يعزل نصوص الإعلانات عن صفحتك لمنع التداخل.
كما يتم تقديم موجزات وسائل التواصل الاجتماعي المباشرة، وأدوات الطقس، وشرائط الأخبار بشكل شائع بهذه الطريقة، لأن الإطار المضمن (iFrame) يسمح بتحديث المحتوى الخارجي بشكل مستقل عن بقية صفحتك.
سمات الإطار المضمن (iFrame) التي تحتاج إلى فهمها فعليًا
تقوم العديد من المنصات بإنشاء رمز iFrame تلقائيًا، ولكن معرفة وظيفة كل سمة يجنبك الكثير من الارتباك عند حدوث خلل أو سلوك غير متوقع. إليك شرح مبسط لأهم هذه السمات.
السمة src: الجزء الأكثر أهمية
تحدد سمة src الخاصة بـ iframe عنوان URL للمستند أو المورد الخارجي المراد تحميله داخل الإطار. وبدون سمة src صالحة، لن يقوم iframe بتحميل أي شيء.
يجب أن تكون القيمة عنوان URL كاملًا بتقنية HTTPS يشير إلى صفحة متاحة للعامة أو نقطة نهاية مضمنة. تُنشئ منصات مثل يوتيوب وخرائط جوجل عناوين URL مضمنة خاصة تختلف عن عناوين URL القياسية الخاصة بالمتصفح.
استخدم دائمًا رابط التضمين في عنصر src الخاص بإطار iframe، وليس رابط شريط العناوين العادي. يبدو وسم iframe النموذجي كالتالي:
<iframe src="https://www.youtube.com/embed/mij0fmZ7lGw" width="560" height="315" title="فيديو يوتيوب مضمن"></iframe>العرض والارتفاع: الحجم والاستجابة
تحدد سمة العرض وسمات الارتفاع أبعاد الإطار المضمن (iFrame) في صفحتك.
يمكنك استخدام أحجام ثابتة بالبكسل، ولكن بالنسبة للتصميم المتجاوب، فإن النهج الأفضل هو التحكم في العرض والارتفاع من خلال CSS باستخدام عروض قائمة على النسبة المئوية وقاعدة نسبة العرض إلى الارتفاع.
تؤدي الأحجام الثابتة إلى تعطل تصميمات الأجهزة المحمولة إذا تُركت دون معالجة، لذا فكر جيدًا قبل تضمين أبعاد البكسل بشكل ثابت في كود التضمين الخاص بك.
سمة العنوان: مطلوبة لإمكانية الوصول
تُضفي سمة العنوان وصفًا على الإطار المضمن (iFrame). وتعتمد برامج قراءة الشاشة على هذه السمة لإخبار المستخدمين ذوي الإعاقة البصرية بمحتوى الإطار المضمن قبل دخولهم إليه.
محركات البحث، بما فيها جوجل، هذه الخاصية لفهم الغرض من المورد المُضمّن. يُعدّ تجاهلها إخفاقًا في إمكانية الوصول، كما أنه يُفوّت إشارةً مهمةً لتحسين محركات البحث.
يجب أن يحتوي كل إطار iframe تقوم بنشره على سمة عنوان واضحة ودقيقة دون استثناء.
سمة صندوق الحماية: طبقة الأمان الأولى
تُطبق خاصية "الصندوق الرملي" قيودًا على ما يُسمح للمستند المضمن بفعله.
عند إضافة وضع الحماية (sandbox) بدون أي قيم، يعمل الإطار المضمن (iFrame) في وضع التقييد الأقصى، حيث لا يُسمح بتشغيل أي برامج نصية أو نماذج أو نوافذ منبثقة. يمكنك منح الأذونات بشكل انتقائي باستخدام قيم محددة.
تسمح القيمة allow-scripts بتشغيل جافا سكريبت داخل الإطار المضمن، وتسمح القيمة allow-forms بإرسال النماذج.
يُعد استخدام وضع الحماية (sandbox) على أي إطار iframe يحتوي على محتوى لا تتحكم فيه بشكل كامل طريقة مباشرة لتقليل تعرضك للخطر إذا تبين أن هذا المصدر مخترق.
sandbox="allow-scripts allow-forms"سمة السماح: أذونات ميزات المتصفح
تتحكم خاصية السماح في ميزات المتصفح التي يمكن للمستند المضمن الوصول إليها، مثل وضع ملء الشاشة والكاميرا والميكروفون والتشغيل التلقائي.
إذا كنت ترغب في السماح للمستخدمين بتفعيل وضع ملء الشاشة على فيديو مضمن، يمكنك إضافة allow="fullscreen" إلى الوسم.
بينما يتحكم وضع الحماية (sandbox) فيما يمكن أن يفعله الكود المضمن برمجيًا، فإن السماح (allow) يتحكم في واجهات برمجة تطبيقات المتصفح وميزات الأجهزة التي يُسمح لعنصر iFrame بالوصول إليها.
خاصية التحميل: حماية سرعة صفحتك
إضافة loading=”lazy” تخبر المتصفح بتأجيل تحميل iFrame حتى يقوم المستخدم بالتمرير بالقرب منه، بدلاً من تحميله فورًا عند فتح الصفحة لأول مرة.
هذا أحد أبسط التحسينات التي يمكنك إجراؤها على مؤشرات الأداء الأساسية لموقع الويب ، وخاصة على الصفحات التي تحتوي على خرائط أو مقاطع فيديو مضمنة موضوعة في أسفل الصفحة.
لا يكلف شيئاً ولا يتطلب أي تغييرات أخرى على التعليمات البرمجية الحالية أو إعدادات الاستضافة.
كيفية إضافة إطار iframe إلى موقعك الإلكتروني؟
إضافة إطار iframe إلى موقعك الإلكتروني أسهل مما يبدو. بناءً على تصميم موقعك، لديك ثلاث طرق سهلة للاختيار من بينها.
الطريقة الأولى: إضافة الوسم مباشرةً إلى HTML
افتح مصدر HTML لصفحة الويب الخاصة بك وأدرج علامة iFrame في الموضع الذي تريد أن يظهر فيه المحتوى الخارجي.
- قم بملء حقل iframe src بعنوان URL الخاص بالتضمين، وحدد العرض والارتفاع، وقم بتضمين سمة عنوان وصفية، وأضف سمات sandbox وloading عند الاقتضاء.
- احفظ الصفحة وانشرها، وسيقوم المتصفح بتحميل المحتوى الخارجي داخل الإطار المضمن تلقائيًا.
تعمل هذه الطريقة على أي موقع ويب بغض النظر عن المنصة التي يعمل عليها.
الطريقة الثانية: نسخ رمز التضمين من المنصة المصدرية
تقوم معظم المنصات الرئيسية بإنشاء رمز iFrame الكامل نيابةً عنك.
- على موقع يوتيوب، انقر فوق "مشاركة" أسفل الفيديو، ثم حدد "تضمين"، وسيقوم يوتيوب بإنشاء الوسم الكامل مع تعبئة مصدر iframe الصحيح مسبقًا.
- تتبع خرائط جوجل نفس النمط من خلال قائمة المشاركة الخاصة بها.
- مثل سبوتيفاي، ومنصات التواصل الاجتماعي، والعديد من أدوات البرمجيات كخدمة (SaaS) نفس ميزة إنشاء رمز التضمين بنقرة واحدة. ما عليك سوى نسخه ولصقه في مستند HTML الخاص بك، وانتهى الأمر.
هذه هي أسرع طريقة لغير المطورين وتغطي حالات الاستخدام القياسية دون الحاجة إلى أي برمجة يدوية.
الطريقة الثالثة: إضافة إطار iframe في ووردبريس بدون تعديل الكود
إذا كان موقعك يعمل على منصة ووردبريس، فإن إضافة مثل Advanced iFrame تتيح لك تكوين عنوان URL للتضمين من خلال لوحة الإعدادات.
- قم بإدراج الإطار المضمن (iFrame) باستخدام رمز مختصر في القوالب الكلاسيكية، أو كتلة مخصصة في محرر غوتنبرغ.
- ستحصل على وظائف iFrame كاملة دون كتابة سطر واحد من HTML.
بالنسبة للفرق التي تعمل على إعدادات التضمين المخصصة الأكثر تعقيدًا، تقدم Seahawk Media دعمًا عمليًا لتطوير WordPress للمساعدة في تنفيذ وتحسين iFrames كجزء من بنية موقع أوسع.
هل تؤثر الإطارات المضمنة سلبًا على تحسين محركات البحث؟ إليك الإجابة الصريحة
لا تُلحق الإطارات المضمنة ضرراً تلقائياً بتحسين محركات البحث، لكن إساءة استخدامها قد تُلحق ضرراً بالغاً. هذا التمييز مهم، ويعتمد على فهم كيفية تعامل جوجل مع المحتوى المضمن.
بإمكان جوجل فهرسة الإطارات المضمنة (iFrames)، لكن الفضل يعود إلى المصدر
يمكن لجوجل معالجة المحتوى الموجود داخل إطار iframe، ولكن قيمة تحسين محركات البحث (SEO) لهذا المحتوى تنتمي عادةً إلى عنوان URL المصدر، وليس إلى صفحة التضمين الخاصة بك.
إن تضمين فيديو من يوتيوب في منشور مدونتك لا يضيف ثراءً بالكلمات المفتاحية إلى مقالتك من وجهة نظر جوجل.
تستفيد صفحتك بشكل غير مباشر من خلال إشارات التفاعل مثل زيادة الوقت الذي يقضيه الزائر على الصفحة وانخفاض معدل الارتداد، ولكن محتوى iFrame نفسه لا يساهم في تصنيفات صفحتك بالطريقة التي يفعلها محتوى HTML الأصلي.
أي شيء تريد تصنيفه يجب أن يكون موجودًا كـ HTML أصلي على الصفحة، وليس حصريًا داخل إطار iframe.
الإطارات المضمنة ومؤشرات الأداء الأساسية للويب
يمكن أن تؤدي الإطارات المضمنة الثقيلة التي يتم تحميلها فور فتح الصفحة "أكبر محتوى معروض" والتسبب في تغيير التخطيط إذا لم يتم تحديد أبعاد العرض والارتفاع بشكل صريح قبل تحميل المحتوى.
الحل بسيط: استخدم دائمًا خاصية التحميل "lazy"، وقم دائمًا بتعيين الأبعاد بشكل صريح، وتجنب تكديس العديد من الإطارات المضمنة الكبيرة على صفحة واحدة.
كل إطار iframe إضافي يمثل طلب HTTP خارجي إضافي، وتتضاعف تكلفة الأداء بسرعة عبر صفحة تحتوي بالفعل على أصول أخرى قيد التحميل.
مخاطر أمان الإطارات المضمنة وكيفية حماية موقعك
تُعدّ الإطارات المضمنة (iFrames) أدوات فعّالة، لكنها تنطوي على مخاطر لا يُمكن تجاهلها. إليك ما قد يحدث من مشاكل وكيفية تجنّبها على موقعك.
اختطاف النقرات: أكثر هجمات الإطارات المضمنة شيوعًا
يُعدّ اختطاف النقرات الخطر الأمني الرئيسي المرتبط بإطارات iframe. يقوم المهاجم بتحميل صفحتك داخل إطار iframe شفاف مُركّب فوق صفحة خادعة يتحكم بها.
عندما يعتقد المستخدمون أنهم ينقرون على شيء آمن، فإنهم في الواقع يقومون بتنفيذ إجراءات على موقعك دون أن يدركوا ذلك.
تتمثل آلية الدفاع في رأس استجابة HTTP، الذي يخبر المتصفحات ما إذا كان من الممكن تحميل صفحتك داخل إطار iframe على مواقع ويب أخرى.
يؤدي ضبطه على SAMEORIGIN إلى منع المواقع الخارجية من تضمين محتواك.
يُعد رأس Content-Security-Policy مع توجيه frame-ancestors هو النهج المفضل الحديث ويمنحك تحكمًا أكثر دقة في تحديد النطاقات المسموح لها بتضمين صفحاتك.
البرمجة النصية عبر المواقع والمصادر غير الموثوقة
قد يؤدي تضمين إطار iframe من مصدر غير موثوق به إلى البرمجة النصية عبر المواقع إذا كان المحتوى المضمن يقوم بتشغيل جافا سكريبت ضار يحاول التفاعل مع صفحتك الرئيسية.
تُعدّ خاصية الحماية المعزولة (Sandbox) خط الدفاع الأساسي من جانب العميل. فمن خلال تقييد ما يُسمح للمستند المُضمّن بفعله، تحدّ من الضرر حتى في حال اختراق المصدر.
بالإضافة إلى ذلك، تأكد دائمًا من أن كل مصدر iframe يستخدم https بدلاً من http.
يؤدي تضمين محتوى غير آمن في صفحة HTTPS إلى ظهور تحذيرات المحتوى المختلط في المتصفحات الحديثة، مما يؤدي إلى تعطيل الإطار المضمن (iFrame) وتآكل ثقة المستخدم على الفور.
الخاتمة
تُعدّ الإطارات المضمنة أداةً مفيدةً للغاية عند استخدامها بوعي. فهي تتيح لك إثراء صفحاتك بمقاطع الفيديو والخرائط وأدوات الحجز والمحتوى المباشر دون تكلفة الاستضافة أو الجهد الإضافي لتطوير هذه الميزات بنفسك.
القواعد بسيطة: قم دائمًا بتضمين سمة العنوان، واستخدم سمة sandbox للمصادر غير الموثوقة، وقم بتطبيق loading="lazy" لحماية سرعة الصفحة، واحتفظ بمحتوى الترتيب الخاص بك في HTML الأصلي بدلاً من أن يكون مقفلًا داخل إطار iframe حيث لن تنسبه محركات البحث إلى صفحتك.
هل تحتاج إلى مساعدة في تطبيق الإطارات المضمنة (iFrames) أو تحسين موقع ووردبريس الخاص بك من حيث الأداء ومحركات البحث؟
تقدم شركة Seahawk Media خدمات تطوير مواقع الويب وإدارة المواقع الإلكترونية المخصصة للوكالات والشركات النامية.
الأسئلة الشائعة حول الإطارات المضمنة
هل استخدام الإطارات المضمنة (iFrames) على موقعي الإلكتروني آمن؟
نعم، مع اتخاذ الاحتياطات اللازمة. لا تقم بالتضمين إلا من مصادر موثوقة ومؤمنة بتقنية HTTPS. استخدم خاصية الحماية (sandbox) لتقييد ما يمكن للمحتوى المضمن فعله.
احمِ صفحاتك من أن يتم تضمينها ضمن إطارات أخرى باستخدام رأس X-Frame-Options. الإطارات المضمنة ليست خطيرة بطبيعتها، ولكن الاستخدام غير المسؤول لها هو ما يُشكّل الخطر الحقيقي.
هل يؤدي استخدام إطار iframe إلى إبطاء موقعي الإلكتروني؟
نعم، يمكن ذلك. يؤدي تحميل إطار iframe ثقيل فورًا إلى زيادة وقت تحميل الصفحة الأولي ويؤثر على اختبارات الأداء الأساسية للويب . إضافة خاصية التحميل "lazy" تؤجل التحميل حتى يقترب المستخدم من إطار iframe أثناء التمرير.
احرص دائمًا على تحديد قيم العرض والارتفاع بشكل واضح لمنع تغيير تخطيط الصفحة أثناء تحميل المحتوى. هاتان الخطوتان وحدهما تحلان معظم مشاكل أداء الإطارات المضمنة الشائعة دون الحاجة إلى أي تغييرات أخرى.
هل يمكن لجوجل فهرسة المحتوى الموجود داخل إطار iframe؟
يمكن لمحركات البحث جوجل فهرسة محتوى الإطارات المضمنة، لكنّ الفضل في تحسين محركات البحث يعود إلى عنوان URL المصدر، وليس إلى صفحة التضمين. يجب أن يكون المحتوى الذي ترغب في تصنيفه موجودًا في صفحة HTML الأصلية نفسها، وليس داخل إطار مضمن.
هل تعمل الإطارات المضمنة (iframes) على الأجهزة المحمولة؟
نعم، لكنها تتطلب معالجة CSS متجاوبة لعرضها بشكل صحيح. تتسبب العروض الثابتة بالبكسل في تجاوز حدود الشاشة على الشاشات الصغيرة، مما يؤدي إلى خلل في تصميم الصفحة. استخدم عروضًا تعتمد على النسبة المئوية وقاعدة نسبة العرض إلى الارتفاع في CSS للحفاظ على النسب الصحيحة على جميع الأجهزة.
اختبر دائمًا على أجهزة محمولة حقيقية بدلاً من مجرد نافذة متصفح سطح المكتب التي تم تغيير حجمها، حيث يمكن أن يختلف السلوك بطرق لا تظهر إلا على الأجهزة الحقيقية.
