HTMLالوسم <iframe>

تعريفه

بشكل عام نستخدم الوسم <iframe> لوضع إطار في الصفحة بهدف عرض محتوى صفحة أخرى بداخله.

عند عرض المحتوى بواسطة هذا الوسم يجب تحديد بعض الخصائص الأساسية له كمساره، نوعه، طوله و عرضه في الصفحة كالتالي.

<iframe title="page-title"
        src="source-path"
        width="width-value"
        height="height-value">
</iframe>

• مكان الكلمة page-title نمرر عنوان مناسب للصفحة التي سيتم عرضها أو عنوان الصفحة نفسها.
• مكان الكلمة source-path نمرر مسار المحتوى الذي سيتم عرضه.
• مكان الكلمة width-value نمرر عرض المساحة التي سيتم تخصيصها لعرض المحتوى في الصفحة.
• مكان الكلمة height-value نمرر طول المساحة التي سيتم تخصيصها لعرض المحتوى في الصفحة.

دعم المتصفحات

الجدول التالي يظهر المتصفحات التي تدعم الوسم <iframe>.

خصائصه

نود الإشارة إلى أننا سنذكر الخصائص المهمة و المستخدمة فعلياً و نتجاهل أي خصائص لا يوصى باستخدامها.

الخاصية allow

نضيفها للوسم لتحديد ما هي الميزات (كالسماح باستخدام المايكروفون, الكاميرا, الوسائط, حالة بطارية الجهاز, مشاركة محتوى إلخ..) التي نريدها أن تعمل في الصفحة المراد عرضها بداخل الإطار و هذه الميزات تكون معدة مسبقاً من قبل API الموقع الذي يحتوي الصفحة.

معلومة: كل الميزات المراد تحديدها أن الصفحة يمكن تستخدمها يكون API الموقع قد جهّز مسبقاً الكلمات التي يجب تمريرها كقيم لهذه الخاصية.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

الخاصية allowfullscreen

نضيفها للوسم لتحديد ما إذا كان يمكن جعل الإطار قابل للعرض على كامل حجم الصفحة أم لا.
في حال تم تمرير القيمة true فهذا يعني أن الإطار سيكون قابل للتكبير, و في حال تم تمرير القيمة false فهذا يعني أنه لن قابل للتكبير.

معلومة: يمكن استدعاء هذه الخاصية بهذا الأسلوب allow="fullscreen" أيضاً و تقنياً تكبير الإطار يتم عن طريق استدعاء الدالة requestFullscreen().

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

الخاصية height

نضيفها للوسم لتحديد كم سيكون طول الإطار الذي سيتم فيه عرض محتوى الصفحة.
ملاحظة: الطول الإفتراضي للإطار هو 150 بكسل.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

الخاصية name

يمكن إضافتها للوسم بهدف إعطائه إسم مما يجعلك قادراً على توجيه المستخدم بشكل مباشر للمكان الموجود فيه.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

الخاصية referrerpolicy

يمكن إضافتها للوسم بهدف تحديد معلومات المرسل التي سيتم إرسالها مع طلب المستخدم إلى الموقع الذي سيتلقى طلبه.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

يجب تمرير إحدى القيم التالية المهيئة مسبقاً كقيمة للخاصية rel لتحديد ما هي المعلومات التي سيتم إرسالها مع الطلب.

الخاصية src

نضيفها للوسم لتحديد مسار الصفحة المراد عرضها في الإطار مع الإشارة إلى أنه يجب وضع about:blank لها كقيمة في حال أردت عرض صفحة فارغة بداخل الإطار.

معلومة: في حال إزالة الصفحة من داخل الإطار بواسطة جافا سكربت هكذا Element.removeAttribute() فإن أغلب المتصفحات - و ليس جميعها - تقوم بوضع about:blank كقيمة لها عند فعل ذلك.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

الخاصية sandbox

نضيفها للوسم للسماح للصفحة المعروضة في الإطار بتجاوز القيود التي يتم وضعها عليها بشكل إفتراضي.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.
ملاحظة: الخاصية مدعومة في المتصفحات المذكورة و لكن القيم التي يمكن تمريرها لها ليس بالضرورة أن تكون مدعومة.

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

الخاصية srcdoc

في حال أردت عرض تمرير كود HTML بشكل مباشر بداخل الإطار فيمكنك إضافة هذه الخاصية للوسم و وضع الكود كقيمة لها.
في حال إضافة الخاصيتين src و srcdoc في وقت واحد للوسم فإنه يتم وضع محتوى الخاصية srcdoc فقط في الإطار. و في حال كان المتصفح لا يدعم الخاصية srcdoc فإنه يعرض محتوى الصفحة التي تشير إليها الخاصية src بداخل الإطار.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

الخاصية width

نضيفها للوسم لتحديد كم سيكون عرض الإطار الذي سيتم فيه عرض محتوى الصفحة.
ملاحظة: العرض الإفتراضي للإطار هو 300 بكسل.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

إستخدامه

في المثال التالي قمنا بوضع إطار في الصفحة و بداخله عرضنا الصفحة الرئيسية في موقع هرمش.

<iframe
    width="500"
    height="400"
    src="https://harmash.com">
</iframe>

في المثال التالي قمنا بوضع إطار في الصفحة و بداخله عرضنا فيديو موجود في يوتيوب.
ملاحظة: الخصائص frameborder و allow و allowfullscreen هي خصائص من إعداد يوتيوب و ليست من خصائص لغة HTML.

<iframe
    width="560"
    height="315"
    src="https://www.youtube.com/embed/bfaPnlYE8Jo"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen>
</iframe>

في المثال التالي قمنا بوضع إطار في الصفحة و بداخله عرضنا موقع منطقة موجودة على خرائط جوجل.

<iframe
    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d23812.80713859107!2d35.71733426480526!3d34.35071699751269!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x1521e4d7247b6757%3A0xe38de220e74243a4!2sAnfeh!5e1!3m2!1sen!2slb!4v1607939494297!5m2!1sen!2slb"
    width="600"
    height="450"
    frameborder="0"
    style="border:0;"
    allowfullscreen=""
    aria-hidden="false"
    tabindex="0">
</iframe>

تضمين فيديوهات يوتيوب

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

تضمين خرائط جوجل

بالنسبة للحصول على كود مشاركة المنطقة من خرائط جوجل فالطريقة هي نفسها، حيث تنقر على زر المشاركة ( Share ) الذي تجده بجانب الخريطة، و من ثم تنقر على خيار تضمين الخريطة ( embed a map ) ليظهر لك الكود جاهزاً.

تصميمه الإفتراضي

بشكل عام جميع المتصفحات تعرضه بالتنسيق التالي.

iframe:focus {
    outline: none;
}

iframe[seamless] {
    display: block;
}

نصائح و ملاحظات

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