تضمين 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 جاهزًا للعرض.
أمثلة مع العناصر النائبة:
<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.