AMP
VI
English Deutsch Français العربية Español Italiano Indonesia 日本語 한국어 Português Русский Türkçe 中文 Polski

Bao gồm các iframe

Important: this documentation is not applicable to your currently selected format stories!

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).

ĐỌC TIẾP – Tìm hiểu thêm ở phần thông số kỹ thuật đầy đủ cho 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ị.

ĐỌC TIẾP –: Tìm hiểu thêm về mã giữ chỗ trong Iframe với mã giữ chỗ.

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.