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.
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
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.
Observe o atributo resizable na tag.
A div com atributo overflow:
Clique aqui para mostrar mais
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.
Segurança: Atualizações frequentes geralmente incluem patches de segurança para corrigir vulnerabilidades identificadas. Ao manter o Magento atualizado, você reduz significativamente…
Como adicionar uma mensagem de Alerta ou Aviso do Admin do Magento 2 Injete o Magento\Framework\Message\ManagerInterface no construtor da sua…
Para exibir as mensagens adicionadas na classe Magento\Framework\Message\ManagerInterface em um arquivo .phtml, você pode usar o seguinte código: <?php $objectManager…
Para criar um script no Magento 2 que exporte as categorias para um arquivo XML com o nome da categoria,…
Para definir um vídeo MP4 como plano de fundo em um <div> usando HTML e CSS, você pode seguir estas…
Como desativar o "lastname" no Magento 2 e Adobe Commerce Desativando a obrigatoriedade do campo Execute a SQL abaixo diretamente…