إعلان
دورة تطوير التطبيقات باستخدام لغة JavaScript في هذه الدورة ستتعلم لغة جافا سكريبت, استخدام مكتبة React.js, بناء API الموقع بواسطة Node.js, تطوير تطبيق جوال باستخدام React Native, و في نهاية الدورة ستتعلم تطوير تطبيق محادثة شبيه بتطبيق WhatsApp. تعلم الآن
دورة تطوير واجهات المستخدم في هذه الدورة ستتعلم لغة HTML و لغة CSS و لغة JavaScript. من ناحية التطبيق العملي ستتعلم طريقة بناء واجهة متجر إلكتروني مكون من ست صفحات, تحويل خمسة تصاميم PSD إلى صفحات ويب, بناء واجهة مستخدم تشبه موقع يوتيوب, بناء لوحة تحكم إحترافية. تعلم الآن
تطوير تطبيقات باستخدام لغة بايثون في هذه الدورة ستتعلم أساسيات البرمجة بلغة بايثون وصولاً إلى التعامل مع أشهر أطر العمل (Flask و Django) و ستتعلم كيف تبني متجر إلكتروني يمكن للمستخدمين البيع و الشراء من خلاله. تعلم الآن
دورة تطوير تطبيقات الويب باستخدام لغة PHP في هذه الدورة ستتعلم لغة PHP من الصفر, استخدام إطار العمل Laravel بشرح مفصّل و عملي, كيفية تطوير شبكة اجتماعية تشبه Instagram, بناء API لتطبيق جوال وفق أسلوب RESTful, تطوير موقع إعلانات مبوبة, تطوير نظام إدارة محتوى CMS كامل. تعلم الآن
دورة تطوير تطبيقات الويب باستخدام لغة Ruby في هذه الدورة ستتعلم البرمجة بلغة Ruby إنطلاقاً من أبسط المفاهيم وحتى بناء تطبيق حقيقي, إستخدام إطار العمل Ruby on Rails بشرح مفصّل و عملي, بناء تطبيق حقيقي عبارة عن شبكة اجتماعية تشبه تويتر, تطوير مجتمع الكتروني يشبه حسوب I/O. تعلم الآن
دورة علوم الحاسوب هذه الدورة معدة لتكون مدخل لعلوم الحاسوب و لغات البرمجة حيث ستتعرف فيها على أنظمة التشغيل و ستتعمق في نظام لينكس و في كيفية التعامل معه من خلال موجه الأوامر, بالإضافة إلى قواعد البيانات و أساسيات الشبكات و الخوادم و مبادئ الحماية والأمان في الويب. تعلم الآن

    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 نمرر طول المساحة التي سيتم تخصيصها لعرض المحتوى في الصفحة.

    معلومة تقنية

    أهم خاصية يجب وضعها لهذا الوسم هي الخاصية src لأنه لا بد من تحديد محتوى الصفحة المراد عرضها. بالنسبة للخاصية title يفضل إضافتها له لأنه في حال كان المستخدم يستخدم قارئ الشاشة ( Screen Reader ) فإنه سيقوم بقراءة العنوان الموضوع كقيمة لها.

    بالنسبة لتحديد حجم الإطار الذي سيتم عرضه مكان هذا الوسم فيمكنك تحديده بشكل مباشر من خلال تمرير قيم للخاصيتين width و height, و يمكنك تحديده بشكل أدق بواسطة CSS و بواسطة جافا سكربت أيضاً.

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

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

    Chrome Edge Firefox Opera Safari Android
    Webview
    Chrome
    for Android
    Firefox
    for Android
    Opera
    for Android
    Safari
    for IOS
    Samsung
    Internet
    1 12 مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم

    خصائصه

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


    الخاصية allow

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

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

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

    Chrome Edge Firefox Opera Safari Android
    Webview
    Chrome
    for Android
    Firefox
    for Android
    Opera
    for Android
    Safari
    for IOS
    Samsung
    Internet
    60 79 74 47 11.1 60 60 غير مدعوم 44 11.3 8.0


    الخاصية allowfullscreen

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

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

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

    Chrome Edge Firefox Opera Safari Android
    Webview
    Chrome
    for Android
    Firefox
    for Android
    Opera
    for Android
    Safari
    for IOS
    Samsung
    Internet
    27 ≤79 18 ≤15 7 37 27 18 ≤14 7 1.5


    الخاصية height

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

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

    Chrome Edge Firefox Opera Safari Android
    Webview
    Chrome
    for Android
    Firefox
    for Android
    Opera
    for Android
    Safari
    for IOS
    Samsung
    Internet
    1 12 مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم


    الخاصية name

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

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

    Chrome Edge Firefox Opera Safari Android
    Webview
    Chrome
    for Android
    Firefox
    for Android
    Opera
    for Android
    Safari
    for IOS
    Samsung
    Internet
    1 12 مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم


    الخاصية referrerpolicy

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

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

    Chrome Edge Firefox Opera Safari Android
    Webview
    Chrome
    for Android
    Firefox
    for Android
    Opera
    for Android
    Safari
    for IOS
    Samsung
    Internet
    51 79 50 38 11.1 51 51 50 41 غير مدعوم 7.2

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

    القيمة معناها
    no-referrer لعدم إرسال أي معلومة مع طلب الإطار للصفحة التي سيتم عرضها بداخله.
    no-referrer-when-downgrade لعدم إرسال أي معلومة في Header طلب الإطار ( أي المعلومات التي يرسلها الإطار للموقع الذي يحتوي الصفحة ) إذا كان الموقع الذي سيتلقى الطلب لا يستخدم البروتوكل https و هذا هو الحال الإفتراضي.
    origin لإرسال المعلومات التالية مع طلب الإطار ( scheme - host - port ) في حال كانت الصفحة المطلوبة موجودة في الموقع نفسه.
    origin-when-cross-origin لإرسال المعلومات التالية مع طلب الإطار ( scheme - host - port ) بالإضافة إلى المسار ( path ) في حال كانت الصفحة المطلوبة موجودة في نفس الموقع.
    same-origin لإرسال كل المعلومات المتاحة مع طلب الإطار في حال كانت الصفحة المطلوبة موجودة في نفس الموقع مع عدم إرسال أي معلومة مع الطلب في حال كانت الصفحة موجودة في موقع آخر.
    strict-origin لإرسال رابط الصفحة التي فيها الإطار مع الطلب في حال كانت الصفحة المطلوبة تستخدم نفس درجة الأمان. نقصد بذلك أنه في حال كان الصفحة التي تطلب عرض محتوى صفحة أخرى بداخل الإطار تستخدم البروتوكل https فلا بد من أن تكون الصفحة الأخرى تستخدم نفس البروتوكل.
    strict-origin-when-cross-origin لإرسال كل المعلومات المتاحة مع طلب الإطار في حال كانت الصفحة المطلوبة تستخدم نفس درجة الأمان. نقصد بذلك أنه في حال كان الصفحة التي تطلب عرض محتوى صفحة أخرى بداخل الإطار تستخدم البروتوكل https فلا بد من أن تكون الصفحة الأخرى تستخدم نفس البروتوكل.
    unsafe-url لإرسال المعلومات التالية فقط مع طلب الإطار ( origin - path ) أي بدون أي معلومة حساسة كإسم المستخدم و كلمة مروره.


    الخاصية src

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

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

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

    Chrome Edge Firefox Opera Safari Android
    Webview
    Chrome
    for Android
    Firefox
    for Android
    Opera
    for Android
    Safari
    for IOS
    Samsung
    Internet
    1 12 مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم


    الخاصية sandbox

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

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

    Chrome Edge Firefox Opera Safari Android
    Webview
    Chrome
    for Android
    Firefox
    for Android
    Opera
    for Android
    Safari
    for IOS
    Samsung
    Internet
    4 12 17 15 5 مدعوم مدعوم 17 ؟ 4.2 مدعوم

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

    القيمة معناها
    allow-downloads للسماح للمستخدم بتحميل محتوى من الصفحة الموضوعة في الإطار.
    allow-forms للسماح للمستخدم بإرسال البيانات التي يملؤها في نموذج موضوع في الصفحة المعروضة في الإطار.
    allow-modals للسماح للصفحة الموضوعة في الإطار أن تظهر نافذة منبثقة.
    allow-pointer-lock للسماح للصفحة الموضوعة بالإستحواذ على مؤشر الماوس. نقصد بذلك أن حركة الماوس يمكن جعله على سبيل المثال تبقى ضمن الصفحة الموضوعة في الإطار.
    allow-popups للسماح للصفحة الموضوعة في الإطار أن تفتح تبويب ( Tab ) في المتصفح.
    allow-popups-to-escape-sandbox للسماح للصفحة الموضوعة في الإطار أن تظهر تبويب ( Tab ) في المتصفح لا علاقة له بالصفحة نفسها كالإعلانات على سبيل المثال.
    allow-same-origin للسماح لسكربتات الصفحة الصفحة الموضوعة في الإطار بأن تعمل حتى لو كانت من مواقع أخرى.
    allow-scripts للسماح لسكربتات الصفحة الصفحة الموضوعة في الإطار بأن تعمل مع عدم السماح لها بإظهار تبويبات ( Tabs ) في المتصفح.


    الخاصية srcdoc

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

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

    Chrome Edge Firefox Opera Safari Android
    Webview
    Chrome
    for Android
    Firefox
    for Android
    Opera
    for Android
    Safari
    for IOS
    Samsung
    Internet
    20 79 25 15 6 37 25 25 ؟ ؟ 1.5


    الخاصية width

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

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

    Chrome Edge Firefox Opera Safari Android
    Webview
    Chrome
    for Android
    Firefox
    for Android
    Opera
    for Android
    Safari
    for IOS
    Samsung
    Internet
    1 12 مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم

    إستخدامه

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

    المثال الأول

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

    إعلان

    Eqla3Tech.com

    شروحات مكتوبة حول لغات البرمجة و تقنية المعلومات باللغة العربية مقدمة من إقلاع تك.

    لغة جافا لغة ++C قواعد البيانات نظام ويندوز نظام لينكس الشبكات تقنية المعلومات

    الدورات

    أدوات مساعدة

    الأقسام

    دورات
    مقالات أسئلة مشاريع كتب