Do you build things with AMP? Fill out the AMP Developer Survey!
AMP

Dodawanie ramek iframe

Dowiedz się, jak wyświetlać zawartość multimedialną na swoich stronach i jak używać ramek iframe do wyświetlania zaawansowanej zawartości poza ograniczeniami AMP.

Podstawy

Możesz wyświetlić ramkę iframe na swojej stronie, używając elementu amp-iframe.

Ramki iframe są szczególnie przydatne w AMP do wyświetlania treści nieobsługiwanych w kontekście strony głównej, takich jak treści wymagające kodu JavaScript użytkownika.

Wymagania składnika amp-iframe

  • Musi znajdować się o 600 px lub 75% pierwszego okienka na stronie od góry (z wyjątkiem ramek iframe używających elementu placeholder).
  • Mogą żądać zasobów jedynie za pośrednictwem protokołu HTTPS i nie mogą mieć tego samego pochodzenia, co kontener, chyba że nie określają one reguły allow-same-origin.

CZYTAJ DALEJ — dowiedz się więcej z pełnej specyfikacji składnika amp-iframe.

Dodawanie skryptu

Aby dodać składnik amp-iframe do strony, najpierw umieść w sekcji <head> następujący skrypt, który ładuje dodatkowy kod składnika rozszerzonego:

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

Napisz znaczniki

W poniższym przykładzie utworzyliśmy responsywny składnik amp-iframe, aby osadzić mapę Google za pomocą interfejsu API Google Maps Embed:

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

Stosowanie elementów zastępczych

Składnik amp-iframe można wyświetlać na początku dokumentu, o ile składnik amp-iframe zawiera element z atrybutem placeholder (na przykład element amp-img), renderowany jako zastępczy do chwili przygotowania ramki iframe do wyświetlenia.

CZYTAJ DALEJ —: dowiedz się więcej o elementach zastępczych z artykułu Element iframe z atrybutem placeholder.

Przykład z atrybutem placeholder:

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

Renderowany jako:

Przykłady

Bardziej zaawansowane przykłady składnika amp-iframe można znaleźć w sekcji AMP By Example.