علامة HTML "iframe"

اكتشف أساسيات العمل باستخدام HTMLiframeبطاقة شعار

الiframeتسمح لنا العلامة بتضمين المحتوى القادم من أصول أخرى (مواقع أخرى) في صفحة الويب الخاصة بنا.

من الناحية الفنية ، يُنشئ إطار iframe سياق تصفح متداخلًا جديدًا. وهذا يعني أن أي شيء في إطار iframe لا يتعارض مع الصفحة الرئيسية والعكس صحيح. لا يتم "تسريب" JavaScript و CSS إلى / من إطارات iframe.

تستخدم العديد من المواقع إطارات iframe لأداء أشياء مختلفة. قد تكون على دراية بـ Codepen أو Glitch أو المواقع الأخرى التي تسمح لك بالتشفير في جزء واحد من الصفحة ، وسترى النتيجة في مربع. هذا إطار iframe.

يمكنك إنشاء واحدة بهذه الطريقة:

<iframe src="page.html"></iframe>

يمكنك تحميل عنوان URL مطلق أيضًا:

<iframe src="https://site.com/page.html"></iframe>

يمكنك تعيين مجموعة من معلمات العرض والارتفاع (أو تعيينها باستخدام CSS) وإلا سيستخدم إطار iframe الإعدادات الافتراضية ، مربع 300 × 150 بكسل:

<iframe src="page.html" width="800" height="400"></iframe>

Srcdoc

الsrcdocتتيح لك السمة تحديد بعض HTML المضمنة لإظهارها. إنه بديل لـsrc، ولكنها حديثة وغير مدعومة في Edge 18 والإصدارات الأقدم وفي IE:

<iframe srcdoc="<p>My dog is a good dog</p>"></iframe>

صندوق الرمل

الsandboxتسمح لنا السمة بتحديد العمليات المسموح بها في إطارات iframe

إذا حذفناها ، فكل شيء مسموح به:

<iframe src="page.html"></iframe>

إذا قمنا بتعيينه على "" ، فلا شيء مسموح به:

<iframe src="page.html" sandbox=""></iframe>

يمكننا تحديد ما نسمح به عن طريق إضافة خيارات في ملفsandboxينسب. يمكنك السماح بأخرى عن طريق إضافة مسافة بينهما. فيما يلي قائمة غير كاملة بالخيارات التي يمكنك استخدامها:

  • allow-forms: السماح بإرسال النماذج
  • allow-modalsالسماح بفتح النوافذ المشروطة ، بما في ذلك الاتصالalert()في JavaScript
  • allow-orientation-lockالسماح لقفل اتجاه الشاشة
  • allow-popupsالسماح بالنوافذ المنبثقة ، باستخدامwindow.open()وtarget="_blank"الروابط
  • allow-same-originتعامل مع المورد الذي يتم تحميله على أنه نفس الأصل
  • allow-scriptsيتيح لإطار iframe الذي تم تحميله تشغيل البرامج النصية (ولكن ليس إنشاء النوافذ المنبثقة)
  • allow-top-navigationيتيح الوصول إلى إطار iframe إلى سياق تصفح المستوى الأعلى

يسمح

تجريبي حاليًا ولا تدعمه سوى المتصفحات المستندة إلى Chromium ، هذا هو مستقبل مشاركة الموارد بين النافذة الرئيسية و iframe.

إنه مشابه لـsandbox، ولكنها تتيح لنا السماح بميزات محددة ، بما في ذلك:

  • accelerometerيتيح الوصول إلى واجهة مقياس التسارع Sensors API
  • ambient-light-sensorيتيح الوصول إلى واجهة Sensors API AmbientLightSensor
  • autoplayيسمح بتشغيل ملفات الفيديو والصوت تلقائيًا
  • cameraيسمح بالوصول إلى الكاميرا من ملفgetUserMedia API
  • display-captureيسمح بالوصول إلى محتوى الشاشة باستخدام getDisplayMedia API
  • fullscreenيسمح بالوصول إلى وضع ملء الشاشة
  • geolocationيسمح بالوصول إلىواجهة برمجة تطبيقات تحديد الموقع الجغرافي
  • gyroscopeيتيح الوصول إلى واجهة جيروسكوب Sensors API
  • magnetometerيتيح الوصول إلى واجهة مقياس المغناطيسية Sensors API
  • microphoneيتيح الوصول إلى ميكروفون الجهاز باستخدام getUserMedia API
  • midiيسمح بالوصول إلى Web MIDI API
  • paymentيتيح الوصول إلى Payment Request API
  • speakerيسمح بالوصول إلى تشغيل الصوت من خلال مكبرات صوت الجهاز
  • usbيتيح الوصول إلى WebUSB API.
  • vibrateيتيح الوصول إلى Vibration API
  • vrيتيح الوصول إلى WebVR API

المرجع

عند تحميل إطار iframe ، يرسل المتصفح إليه معلومات مهمة حول من يقوم بتحميله في ملفRefererرأس (لاحظ واحدr، خطأ مطبعي يجب أن نتعايش معه).

The misspelling of referrer originated in the original proposal by computer scientist Phillip Hallam-Baker to incorporate the field into the HTTP specification. The misspelling was set in stone by the time of its incorporation into the Request for Comments standards document RFC 1945

الreferrerpolicyتتيح لنا السمة تعيين المُحيل للإرسال إلى iframe عند تحميله. المُحيل هو رأس HTTP يتيح للصفحة معرفة من يقوم بتحميلها. هذه هي القيم المسموح بها:

  • no-referrer-when-downgradeإنه الإعداد الافتراضي ، ويرسل المرجع عند تحميل الصفحة الحالية عبر HTTPS ويتم تحميل إطار iframe على بروتوكول HTTP
  • no-referrerلا يرسل رأس المرجع
  • originيتم إرسال المرجع ، ويحتوي فقط على الأصل (المنفذ ، البروتوكول ، المجال) ، وليس الأصل + المسار الذي يعد الافتراضي
  • origin-when-cross-originعند التحميل من نفس الأصل (المنفذ ، البروتوكول ، المجال) في iframe ، يتم إرسال المرجع في شكله الكامل (الأصل + المسار). وإلا يتم إرسال الأصل فقط
  • same-originيتم إرسال المُحيل فقط عند التحميل من نفس المصدر (المنفذ ، البروتوكول ، المجال) في إطار iframe
  • strict-originيرسل الأصل باعتباره المُحيل إذا تم تحميل الصفحة الحالية عبر HTTPS ويتم أيضًا تحميل إطار iframe على بروتوكول HTTPS. لا يرسل أي شيء إذا تم تحميل إطار iframe عبر HTTP
  • strict-origin-when-cross-originيرسل الأصل + المسار كمحيل عند العمل على نفس الأصل. يرسل الأصل باعتباره المُحيل إذا تم تحميل الصفحة الحالية عبر HTTPS ويتم أيضًا تحميل إطار iframe على بروتوكول HTTPS. لا يرسل أي شيء إذا تم تحميل إطار iframe عبر HTTP
  • unsafe-url: يرسل الأصل + المسار باعتباره المُحيل حتى عند تحميل الموارد من HTTP ويتم تحميل الصفحة الحالية عبر HTTPS

تحميل مجانيكتيب HTML


المزيد من دروس html: