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