AMP

تضمين iframes

Learn how to display include media content in your pages, and how to use iframes to display advanced content outside of AMP's limitations.

الأساسيات

يمكنك عرض iframe في صفحتك عن طريق استخدام العنصر amp-iframe.

إن Iframe مفيدة بشكل خاص في AMP لعرض المحتوى غير المدعوم في سياق الصفحة الرئيسية، مثل المحتوى الذي يتطلب JavaScript من تأليف المستخدم.

متطلبات amp-iframe

  • يجب أن تكون على الأقل 600بكسل أو 75% من منفذ العرض الأول بعيدًا عن الجزء العلوي (باستثناء إطارات iframes التي تستخدم placeholder).
  • يمكن طلب الموارد عبر HTTPS فقط، ويجب ألا تكون في الأصل نفسه مثل الحاوية، إلا إذا لم تحدد السماح-بالأصل-نفسه.

تابع القراءة – تعرف على المزيد حول المواصفات الكاملة لـ amp-iframe.

تضمين النص البرمجي

لتضمين amp-iframe في صفحتك، قم أولًا بتضمين النص البرمجي التالي في <head>، الذي يقوم بتحميل الرمز الإضافي للمكون الممتد:

<script async custom-element="amp-iframe"
  src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>

كتابة لغة الترميز

في المثال التالي، قمنا بإنشاء amp-iframe سريع الاستجابة لدمج خرائط جوجل عبر واجهة برمجة التطبيقات لدمج خرائط جوجل:

<amp-iframe
  width="200"
  height="100"
  sandbox="allow-scripts allow-same-origin"
  layout="responsive"
  src="https://www.google.com/maps/embed/v1/place?key={YOUR API KEY}&q=europe"
>
</amp-iframe>

استخدام العناصر النائبة

يمكنك عرض amp-iframe في الجزء الأعلى من المستند، بشرط أن يحتوي amp-iframe على عنصر بالسمة placeholder، (على سبيل المثال، عنصر amp-img) والذي سيتم عرضه كعنصر نائب حتى يصبح إطار iframe جاهزًا للعرض.

تابع القراءة –: تعرف على المزيد حول العناصر النائبة في Iframe بالعناصر النائبة.

أمثلة مع العناصر النائبة:

<amp-iframe
  width="400"
  height="225"
  sandbox="allow-scripts allow-same-origin"
  layout="responsive"
  src="https://giphy.com/embed/OWabwoEn7ezug"
>
  <amp-img
    placeholder
    layout="fill"
    src="https://ampproject-b5f4c.firebaseapp.com/examples/images/kittens-biting.jpg"
  ></amp-img>
</amp-iframe>

يعرض على النحو التالي:

أمثلة

يمكنك العثور على المزيد من أمثلة amp-iframe المتقدمة في أمثلة استخدام AMP.