❮
Programming Basics SQL HTML CSS JavaScript Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Learn Typing
❯
عودة للدرس❯ ❮عودة للدرس

HTMLالوسم <iframe>

  • تعريفه
  • دعم المتصفحات
  • خصائصه
  • إستخدامه
  • تصميمه الإفتراضي
  • نصائح و ملاحظات

تعريفه

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

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

<iframe title="page-title"
src="source-path"
width="width-value"
height="height-value">
</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>
<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 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>
<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:focus { outline: none; } iframe[seamless] { display: block; }

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

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

عودة للدرس❯ ❮عودة للدرس