Como criar um Iframe Redimensionável no AMP

Como criar um Iframe Redimensionável no AMP, requisitos e implementações necessárias para que seja possível alterar a altura e largura do Iframe.

Componente necessária para a utilização do amp-iframe, inclua no Header do seu projeto.

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

Requisitos para criar um Iframe Redimensionável no AMP

Uma característica importante do amp-iframe é a capacidade de redimensionar o iframe em tempo de execução. Para que isso funcione será necessário seguir os seguintes critérios:

O amp-iframe deve ter definido o atributo allow-same-origin no atributo sandbox .

O amp-iframe deve ser definido com o atributo resizable.

O amp-iframe deve ter um elemento secundário com atributo overflow.

O documento iframe deve enviar uma solicitação embed-size

Modelo da solicitação “request”:

window.parent.postMessage({
  sentinel: 'amp',
  type: 'embed-size',
  height: document.body.scrollHeight,
  width: document.body.scrollWidth,
}, '*');

Este requisição é enviada utilizando o postMessage.

A mesma será solicitada pelo iframe, durante a execução.

Utilizando do document.body.scrollHeight e document.body.scrollWidth, ajustamos o tamanho do iframe na página de acordo com o seu conteúdo.

Modelo o amp-iframe:

<amp-iframe width="150"
  height="150"
  sandbox="allow-scripts allow-same-origin"
  resizable
  frameborder="0"
  src="https://rogertakemiya.com.br"
  class="m1">
  <div overflow
    tabindex="0"
    role="button"
    class="ampstart-card py1"
    aria-label="Show more">Clique aqui para mostrar mais</div>
</amp-iframe>

Observe o atributo resizable na tag.

A div com atributo overflow:

<div overflow tabindex=”0″ role=”button” class=”ampstart-card py1″ aria-label=”Show more”>Clique aqui para mostrar mais</div>

Observação: Obviamente o conteúdo do iframe será substituído pela página que está definida no atributo SRC,  atenção, você deve escrever a tag iframe já com a div dentro! Não confunda! A div com atributo overflow não deve estar na página do SRC!

E o sandbox com os valores: allow-scripts e allow-same-origin.