دليل شامل للمبتدئين عن الإطار المُضمّن (iFrame) في لغة HTML؟

يُمكنك إستخدام الإطار المُضمّن (iFrame) لعرض محتوى من مواقع خارجية داخل صفحة HTML خاصتك. فيتيح هذا الإطار للمستخدم تضمين مواد مثل مقاطع الفيديو والخرائط والنماذج أو خدمات أخرى بدلاً من توجيهه إلى مَوقع أو صَفحة أخرى.

وتُعدّ الإطارات المُضمّنة (iFrames) خيار شائع للمَواقع الإلكترونية الحديثة لأنها تُمكّنك من دمج خَدمات خارجيّة بدون الحاجة إلى كتابة الكثير من الأكواد البرمجية. كما تُمكّن المطورين مِن إعادة إستخدام المُحتوى والحِفاظ على التّصميم العام وتَوفير وقت التّطوير مع الحفاظ على تميّز المُحتوى الخارجي عن المَوقع الرئيسي. وينطبق هذا سواءً كان المحتوى المُضمّن فيديو من يوتيوب أو خريطة من خرائط جوجل أو نموذج دفع أو لوحة تحكم تحليلية.

أهم النقاط

• الإطارات المُضمّنة (iFrames) هي وسوم HTML تُمكّنك من عرض مُحتوى من مواقع أخرى على موقعك. وهي لا تُوجّه الزوار إلى مَواقع أخرى.
• تُستخدم الإطارات المُضمّنة (iFrames) غالبًا لتَضمين مقاطع الفيديو والخرائط والنماذج وغيرها من الأدوات من جهات خارجية.
• تُتيح تِقنية iFrames للمطورين الوصول إلى الخَدمات والأَدوات التي يحتاجونها ممّا يُقلل من وَقت التّطوير.
• تحافظ iFrames على نظافة الكود عن طريق تَضمين المُحتوى ممّا يجعله يعمل بشكل أسرع وأكثر موثوقية.
• قد يؤثر إستخدام iFrames بشكل سلبي على تَحسين مُحركات البَحث وأداء الموقع لذا يُنصح بتجنبها.
• عند استخدام iFrames من الضروري اتباع ممارسات الأمان القياسية مثل الحِماية (Sandboxing) وإستخدام مصادر موثوقة فقط.
• قد تَظل iFrames خيار جيد للمَواقع الإلكترونيّة الحالية لو تم إستخدامها بشكل صحيح.

ما معنى iFrame؟

الإسم الكامل لـ iFrame هو الإطار المُضمّن (inline frame). وهو نَوع من ملفات الـ HTML. وتتيح هذه الطريقة لصفحات المواقع عَرض صَفحة موقع آخر أو مَصدر خارجي في جزء محدد من الصّفحة الحاليّة. يتم تَنزيل مُحتوى الصّفحة من مكان منفصل لكنها تظل تبدو جزء لا يتجزأ من الصفحة.

تُعدّ الإطارات المُضمنة (iFrames) إصدارات أحدث من تَصميمات HTML القَديمة التي كانت تستخدم الإطارات. قَد يؤدّي التّصميم القائِم على الإطارات إلى تَقسيم نافِذة المُتصفح إلى أَجزاء أصغر يفتح كُل جُزء منها صَفحة منفصلة ​​ممّا يُصعّب على المُستخدمين إستخدامها ويؤثر بشكل سلبي على تَحسين محركات البحث (SEO). أمّا الإطارات المُضمّنة فهي جزء من مُحتوى صَفحة الموقع ممّا يَجعلها أكثر مُرونة وسهولة في التطوير لتناسب تصميمات المواقع الحديثة.

ما هو الإطار المُضمّن (iFrame)؟

دور الإطار المُضمّن يتمحور حول وضع صَفحة الموقع داخل صفحة أُخرى. ولتحقيق ذلك يجب إستخدام وسم HTML مُعين. فيوجد عُنصر iFrame في الصفحة الرئيسية ينقل المُستخدم إلى موقع أو مَلف آخر. سيظهر الملف على موقعك الإلكتروني في مِساحة ذات إرتفاع وعَرض محددين.

حين تُحمّل المُتصفحات صَفحات المواقع بإستخدام الإطارات المضمنة (iFrames) فإنّها تتَعامل مع كُل صفحة كوثيقة مُنفصلة. قد تُحمّل صفحات المواقع الأُخرى أو تُحدّث أو تتعطل بدون التّأثير على الصّفحات التي يُشكّل الإطار المُضمّن جُزء منها نظرًا لأن الصفحة الأصلية والإطار المضمن يُحمّلان بشكل مستقل.

يُحدّد الاتصال بين الموقع الأصلي والصّفحة المُضمّنة عَمدًا لأسباب أمنية. لا يُمكن للصّفحة الأصلية تحديث المعلومات في الإطار المُضمّن إلّا لو كانت كلتا الوثيقتين من نَفس المَصدر. تحمي هذه القاعدة من عواقب البَرمجة السيئة ممّا يَجعل صَفحات المواقع أكثر أمان.

التعرّف على بُنية الإطار المُضمّن مع بعض الأمثلة

يُمكّنك عنصر الإطار المُضمّن في لغة HTML من وضع مُحتوى من موقع آخر على صفحة الموقع لديك. يُشبه الإِطار المُضمّن نافذةً على موقعك بينما تُشبه المحتوى الديناميكي الأخرى مبنىً من المفترض أن يأتي من مكان آخر. يُمكّن هذا زوّار موقعك من قراءة مُحتوى مَواقع أُخرى بدون أن تغادر صَفحتك.

خَصائص الإطار المُضمّن

يحتاج الإطار المُضمّن إلى خاصّية HTML لعَرض مُحتوى من المواقع الإلكترونية الأخرى.فيُمكنك إستخدام خاصيتي العَرض والإرتفاع لتمنح الإطار المُضمّن مظهر أنيق ومرتب. وتُسهّل خاصية العنوان الوصول إلى الإطار المُضمّن (iFrame) لمن لا يستطيعوا رؤيته (قراءة صفحة الموقع)، وتُعرّفهم بوظيفته.

كما تُساهم بعض الميزات الأخرى في تَحسين أداء الموقع الإلكتروني وزيادة أمانه. فعلى سَبيل المثال تُمكّنك خاصية التحميل البطيء من ضَبط الإطار المُضمّن لعرض المُحتوى فقط عند ظهوره. وهناك كذلك إعدادات أخرى تُستخدم لتَقييد مُحتوى صفحة الموقع المَعروضة داخل الإطار المضمن وذلك لضَمان أمانك أثناء التصفّح.

إحدى طرق إستخدام الإطار المُضمّن (iFrame) هي دمج نُموذج تَسجيل أو إتصال من موقع آخر. هذا يعني أنك لست مضطر لإنشاء نِظام نَماذج خاصتك. يُمكنك السّماح للمستخدمين بإرسال البَيانات على مَوقعك بإستخدام إطار مُضمّن بينما تتِم مُعالجة البَيانات في مكان آخر.

إستخدامات الإطارات المُضمّنة iFrame

في كثير من الأحيان تظهر نفس المعلومات على العديد من المواقع المختلفة. فتساعدك تِقنية الإطارات المُضمّنة في أن تحفاظ على تجرُبة مُستخدم سلسة مع تجنب تكرار البيانات.

عرض مقاطع الفيديو على موقعك (يوتيوب فيميو)

يُعدّ تَضمين مقاطع الفيديو من أَكثر إستخدامات الإطارات المضمنة شيوعًا. يُمكنك مشاهدة الفيديوهات من مواقع مثل اليوتيوب وفيميو داخل إطار مضمن. هذا مُفيد لأنه يَسمح للمَواقع الإلكترونية بعَرض مقاطع الفيديو في مُحتواها مثل المُدوّنات أو صفحات الهبوط بدون أن تحتاج إلى تَخزين ملفّات وسائط كبيرة. قد يؤدي ذلك إلى تحميل الصفحات بشكل أسرع أو تشغيل مقاطع الفيديو بشكل أكثر موثوقية.

عَرض الخَرائط (خرائط جوجل)

تُستخدم الشركات الإطارات المُضمّنة لعرض خَرائط جوجل على صَفحات الإتصال أو المواقع. وبهذه الطريقة سيمكن للعُملاء الذين يبحثون عن الشركات العثور على ما يحتاجونه بدون الحاجة إلى زيارة موقع إلكتروني آخر.

إضافة إعلانات أو نَماذج أو أدوات من شركات أخرى

تُسهّل تقنية iFrames إضافة موارد خارجية مثل نَماذج الدفع وأَنظمة الحجز والمُحادثات المباشرة وإعلانات جوجل بدون تعريض موقعك للخطر. تحتفظ iFrames بهذه العناصر.

عَرض مُحتوى خارجي بدون مغادرة المُستخدمين

من أفضل مزايا iFrames أنها تُبقي الزوار على نَفس الصفحة. وذلك لأنها تتيح لك دمج معلومات أخرى مثل لَوحات تحكم الووردبريس والتقارير ومَواقع الشركاء. فيمكن للمُستخدمين الحصول على معلومات مُحدّثة من مصادر أخرى بدون مُغادرة الصفحة الرئيسية ممّا يُحسّن تجرُبة المُستخدم بشَكل عام.

يتم إرسال العديد من مَقاطع الفيديو المُضمّنة عبر iFrames. تُشير الأبحاث والتقارير من المُطوّرين إلى أنّ أَكثر من 70% من مَقاطع الفيديو المُضمّنة على المواقع الإلكترونية وخاصّةً تلك القادمة من مَواقع مثل اليوتيوب وفيميو تَستخدم تقنيّة iFrame لعَرض المُحتوى بأمان.

فوائد إستخدام الإطارات المُضمّنة (iFrames)

يستخدم العديد من المطورين الإطارات المُضمّنة لعرض معلومات من مصادر أخرى وهو إستخدام شائع في الكثير مِن المَواقع الإلكترونية والتّطبيقات الحالية.

تَضمين بسيط للمحتوى

يرى الكثيرون أن أفضل ما يميز الإطارات المُضمّنة هو سهولة إستخدامها. يمكنك إضافة مقاطع فيديو وخَرائط ونَماذج وحتى صَفحات مواقع كاملة بإستخدام القليل من أكواد HTML. ولأنها سهلة الإستخدام تُعد الإطارات المُضمّنة خيار مُمتاز للفَرق التي لا تملك خِبرة كبيرة في البَرمجة أو لا تَرغب في التّعامل مع البَرمجة المعقدة.

فَصل المُحتوى الخارجي

عند إستخدام الإطارات المضمنة يتم تَحميل المُحتوى الخارجي في مكان مختلف عن الصفحة الرئيسية. لن تحدث أي مشاكل بين مُحتوى المَوقع الرّئيسي والمُحتوى الخارجي بسبب الأنماط أو النصوص البرمجية أو أي مُحتوى مصدر آخر. كما أنه في حالة تعطّل المُحتوى الخارجي المُضمّن أو تغييره لن يتأثر المَوقع الرئيسي. إن إستخدام الإطارات المُضمّنة يعني تَحميل المُحتوى الخارجي في بيئة مُنفصلة عن المَوقع الرّئيسي.

تقليل من جُهد التطوير

لا يجب على المُطورين أن يبنوا وظائف من الصّفر فيمكنهم الحصول عليها بسهولة من مصادر أخرى. وبدلاً من عمل حُلول مُخصصة مثل مُشغلات الفيديو (مثل SMPlayers) أو الخَرائط أو النّماذج يُنصَح بإستخدام iFrames لتَضمين حُلول من مصادر أخرى. هذا يوفّر الوقت ويُسهّل تشغيل النّظام ويُمكّن الفَرق من التّركيز على أهم أجزاء الموقع.

مُفيد للتكامل مع الخدمات الأخرى

تحتاج بعض خدمات الطرف الثالث إلى iFrames للعمل مع خَدماتك. تَستخدم مُعالجات الدف ولوحات تَحليلات البيانات وخَدمات الحجز ومُزودو الإعلانات iFrames لعرض المُحتوى. ولهذا تُعد iFrames آمنة لعرض المحتوى وتُناسب دمج الأدوات.

عُيوب ومشاكل الإطارات المُضمّنة (iFrames)

تُعدّ الإطارات المضمنة مفيدة ولكنها تَنطوي على عدة مشاكل ينبغي مُراعاتها قَبل إستخدامها.

قُيود تَحسين مُحركات البحث (SEO)

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

مَخاوف بشأن الأداء

قد يؤدي إستخدام الإطارات المُضمّنة بشَكل خاطئ إلى إبطاء تحميل صفحة الموقع. نظرًا لأنّ كُل إطار مُضمن يُحمّل مورد مُختلف فقد يستغرق تحميل الموقع وقت أطول. كما أن تأخر تحميل المُحتوى قد يُؤثر بشكل سلبي على تجربة المُستخدم.

مشاكل أمنية (هَجمات النقر الخادِع ومَشاكل الوصول من مَصادر مُختلفة)

يعتقد البعض أن الإطارات المُضمّنة (iframes) خطيرة لإحتمالية إحتواء مُحتواها على مَواد ضارّة. يُعرف هذا النّوع من الهَجمات بهَجمات النّقر الخادع. تَمنع قُيود الوصول من مَصادر مُختلفة الصّفحة الرئيسيّة والمُحتوى المُضمّن من التواصل ممّا قد يُصعّب إصلاح الأخطاء وتحسين الأداء.

تحكّم مَحدود في المُحتوى المُضمّن

يمنحك إستخدام الإطارات المُضمّنة (iFrames) تحكم محدود جدًا في مظهر المُحتوى المُضمّن أو طريقة عمله أو إمكانية تعديله. قد تُؤدي التغييرات التي يُجريها الآخرون إلى ظُهور المحتوى بشكل غريب أو التسبب في مشاكل. وهذا يُصعّب الحفاظ على هوية العَلامة التجارية موحدة في جميع صفحات الموقع.

أمور يجب مراعاتها فيما يتعلق بأمان الإطارات المُضمّنة (iFrames)

وقت إستخدام الإطارات المضمنة (iFrames) يُعدّ الأَمان من أهم الأمور التي ينبغي مُراعاتها خاصةً وقت إضافة مُحتوى من مواقع أخرى أو مواقع تابعة لجهات خارجيّة.

ما المقصود بالحماية (Sandboxing)؟

الحِماية (Sandbox) هي طريقة لحماية متصفحك من خلال السماح لَك بالتحكّم في وظائِف الإطار المُضمّن (iFrame). فعند إستخدام تقنيّة الحِماية (Sandboxing) يَعمل المُحتوى المُضمّن في بيئة مَحدودة بصلاحيات قليلة. فعلى سَبيل المثال يُمكنك مَنعه من تشغيل النصوص البرمجية أو إرسال النّماذج أو الحُصول على ملفّات تَعريف الإرتباط (cookies) إلا لو سَمحت له بذلك. هذا يمنع المُحتوى المُضمّن من القيام بأيّ شَيء ضار ممّا يُحافظ على موقعك الإلكتروني وزواره آمنين من أي خطر محتمل.

قُيود الوصول من مَصادر مُختلفة

تفرض معظم المتصفحات قواعد صارمة للوصول من مصادر مختلفة لمنع أي مَوقع من الوُصول إلى بَيانات مَوقع آخر بدون إذن. هذا يَعني أن الموقع الرئيسي لا يمكنه قِراءة أو تغيير مُحتوى إطار iframe (iframe) قادم من نِطاق مُختلف. يُعد هذا أمر بالغ الأهمية لحماية البيانات من السرقة والوصول الغير قانوني والوصول عَبر البَرامج النصية حتى لو كان ذلك يُقلل من فائدتها.

هل إطارات iframe سيئة لتَحسين مُحركات البحث؟

ليست إطارات iframe سيئة دائمًا لتحسين مُحركات البَحث. ولكن لو تم إستخدامها بشكل خاطئ فقَد تؤثر على ظُهور الموقع في نَتائج البَحث وكفاءة أدائه.

طريقة تعامُل مُحركات البَحث مع الإطارات المُضمّنة (iFrames)

يُعتبر المُحتوى الموجود داخل الإطار المُضمّن (iFrame) مُستند منفصل عن الصفحة الأصلية في أي صَفحة تَستخدم إطار مُضمّن. قد تزحف مُحركات البَحث إلى عَناوين URL الخاصّة بمصادر الإطار المضمن ولكن من مَنظور تَرتيب النتائج لن تكون المعلومات الموجودة داخل الإطار المضمن مرتبطة بالصفحة الأصلية. وهذا يَعني أن المحتوى الموجود داخل الإطار المُضمّن لن يُساعد الموقع الإلكتروني الذي يستخدمه على تحسين ترتيبه في محركات البحث.

متى تُصبح الإطارات المُضمّنة ضارة بتَحسين مُحركات البَحث؟

يُؤثر إستخدام الإطار المُضمّن بشكل سلبي على تَحسين مُحركات البحث لو كان يحتوي على معلومات أو كَلمات مفتاحية أو رَوابط داخلية مهمة. ستُفقد فرص تحسين الترتيب نظرًا لعدم ارتباط المعلومات المَوجودة داخل الإطار المُضمّن بالموقع. كَما أن الصّفحات التي تَستخدم عدد كبير من الإطارات المُضمنة ستستغرق وقت طويل للتحميل ممّا يُؤثر بشكل سلبي على تجربة المستخدم ونتائج البحث.

متى يَكون إستخدام الإطارات المُضمنة (iFrames) مُناسب؟

يُعدّ إستخدام الإطارات المُضمّنة لعرض الفيديوهات والخَرائط والإعلانات أو غيرها من الأدوات الخارجية غير الأساسية آمن بشكل عام لتحسين محركات البحث (SEO). وسيظل موقعك يحتل مرتبة مُتقدمة في نتائج البحث طالما أن المُحتوى النصي الرّئيسي والعَناوين والرّوابط الداخلية ليست داخل الإطار المُضمن. قد تكون الإطارات المضمنة مفيدة وتُحسّن أداء الموقع بدون التّأثير بشكل سلبي على تَحسين مُحركات البحث.

الخُلاصة

لو كُنت ترغب في إضافة الفيديوهات أو خرائط أو نماذج أو أدوات إلى موقعك الإلكتروني فإن الإطار المُضمّن يُعدّ طريقة ممتازة للقيام بذلك. كما أنه لا يتطلب إرسالها إلى مواقع متعددة. فهو يضع إطار فوق صَفحة الموقع خاصتك ويَعرض مُحتوى من مَواقع أخرى.

مع ذلك توجد بعض المشاكل المتعلقة بالإطارات المُضمّنة. فقد تُسبّب مَشاكل في تَحسين مُحركات البَحث ممّا قد يُبطئ تحميل الموقع بالإضافة إلى مشاكل أمنية أخرى. لكنها تُسهّل على المطورين إضافة ميزات خارجية وتُقلّل من حجم الأكواد البَرمجية المطلوبة كما أنها سَهلة الإستخدام لتَضمين المُحتوى.

قواعد الإستخدام الأمثل للإطارات المُضمّنة (iFrames) هي الإعتدال والهدف. استخدم فَقط المُحتوى من مَصادر موثوقة ولا تُضمّن محتوىً هام وألتزم بأَفضل مُمارسات الأمان. يُمكنك إستخدام الإطارات المُضمّنة لتَحسين أداء المَوقع وتجرُبة المُستخدم بشَكل عام بدون التّأثير بشكل سلبي على الأَداء أو ظُهور المَوقع في نتائَج البحث.

أسئلة شائعة