Bao gồm các iframe
Learn how to display include media content in your pages, and how to use iframes to display advanced content outside of AMP's limitations.
Kiến thức cơ bản
Bạn có thể hiển thị một iframe trong trang của mình bằng cách sử dụng yếu tố amp-iframe.
Iframe đặc biệt hữu ích trong AMP để hiển thị các nội dung không được hỗ trợ trong ngữ cảnh của trang chính, ví dụ như các nội dung đòi hỏi JavaScript do người dùng viết.
Yêu cầu đối với amp-iframe
- Phải cách mép trên của màn hiển thị đầu tiên ít nhất 600px hoặc 75% (ngoại trừ các iframe sử dụng
placeholder(mã giữ chỗ)). - Chỉ có thể yêu cầu các tài nguyên qua HTTPS, và chúng phải không có cùng nguồn với container, trừ khi chúng không quy định allow-same-origin (cho phép cùng nguồn gốc).
amp-iframe. Bao gồm kịch bản
Để bao gồm một amp-iframe trong trang của bạn, trước hết hãy bao gồm kịch bản sau trong phần <head> để tải thêm code cho thành phần mở rộng:
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
Viết đánh dấu
Trong ví dụ sau, chúng ta đã tạo một amp-iframe hồi đáp để nhúng Google Maps thông qua API Nhúng Google Maps:
<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>
Sử dụng mã giữ chỗ
Bạn có thể hiển thị một amp-iframe ở đầu tài liệu, với điều kiện amp-iframe chứa một yếu tố với thuộc tính placeholder (mã giữ chỗ), (ví dụ, một yếu tố amp-img) nó sẽ được render dưới dạng một mã giữ chỗ cho đến khi iframe đã sẵn sàng để được hiển thị.
Ví dụ với mã giữ chỗ:
<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>
Render dưới dạng:
Ví dụ
Bạn có thể tìm thấy các ví dụ nâng cao hơn về amp-iframe trong AMP By Example.