Um Iframe é um elemento HTML que permite a incorporação de uma outra página HTML à atual. Dessa forma, a partir do bloco Iframe é possível embutir conteúdos de outras URLs para serem exibidos em nossa página. É importante lembrar que as URLs renderizadas pelo Iframe possuem um contexto próprio, tendo histórico de sessão e DOM independentes da sua página customizada.
ATENÇÃO: Iframes só são permitidos dentro de templates de custom pages.
O bloco iframe tem propriedades bem simples:
src: indica qual URL o iframe deve renderizar
width: largura do elemento iframe em pixels
height: altura do elemento iframe
Abaixo, vemos um exemplo de implementação do bloco iframe:
Inserindo um Iframe na nossa página institucional
:sparkles: Branch: iframe
Introdução
Um Iframe é um elemento HTML que permite a incorporação de uma outra página HTML à atual. Dessa forma, a partir do bloco Iframe é possível embutir conteúdos de outras URLs para serem exibidos em nossa página. É importante lembrar que as URLs renderizadas pelo Iframe possuem um contexto próprio, tendo histórico de sessão e DOM independentes da sua página customizada.
ATENÇÃO: Iframes só são permitidos dentro de templates de custom pages.
O bloco
iframe
tem propriedades bem simples:src
: indica qual URL o iframe deve renderizarwidth
: largura do elemento iframe em pixelsheight
: altura do elemento iframeAbaixo, vemos um exemplo de implementação do bloco
iframe
:Atividade
Vamos exibir um post de Instagram em nossa loja:
rich-text
e inclua um blocoiframe
;iframe
, exiba o conteúdo do linkhttps://www.instagram.com/p/B37Zfd6FobU/embed
num container de 800px de largura por 1000px de altura.:information_source: Lembre-se de acessar a documentação do Iframe caso tenha alguma dúvida durante a atividade.
Resultado esperado:![](https://appliancetheme.vteximg.com.br/arquivos/imagem-iframe.png)
:no_entry_sign: Perdido?
Há algum problema com esse passo? Que tal nos enviar um feedback? :pray:
Criar feedback
Se ainda tiver dúvida sobre como enviar sua resposta, você pode rever aqui.