Iframe HTML: como exibir uma página web dentro de outra?

O iframe HTML, que significa Inline Frame, é uma tag disponível na linguagem de marcação utilizada para inserir conteúdos de outras páginas. Por exemplo, você com certeza já utilizou uma página que contém um vídeo do YouTube, certo? Essa é a principal característica desse recurso, que contém uma série de atributos para adicionar funcionalidades a ele.

Existem algumas particularidades que é preciso considerar ao utilizar esse elemento em uma página, pois ele pode ser a porta de entrada para códigos maliciosos. Por isso, deve ser utilizado com cautela. Para demonstrar como esse recurso funciona, preparamos este conteúdo que contém os seguintes tópicos:

  • O que é e para que serve tag

    Na prática é como se criássemos uma porta de entrada para outro site dentro de uma área na página, pois ele utiliza o conceito de navegação aninhada. Isso significa que é possível, até mesmo, navegar no site externo dependendo de como os atributos forem definidos ao criar o elemento na página.

    Quais os principais atributos do HTML

    Ao utilizar o atributo allow, todas as permissões devem ser separadas por ponto e vírgula, conforme o exemplo acima.

    Permitindo o modo de tela cheia: allowfullscreen

    A autorização para a utilização de tela cheia pode ser dada tanto pelo atributo allow, que mencionamos acima, quanto pelo atributo allowfullscreen. A diferença entre eles é apenas na forma em que o atributo é utilizado. Nesse caso, basta adicionar o atributo conforme o exemplo abaixo.

    Quando utilizamos esse atributo, é possível utilizar um botão para alterar o tamanho do quadro original para a tela cheia. Isso é feito por meio de código JavaScript, por exemplo.

    Adicionando uma borda à página: frameborder

    Quando utilizamos o

    Definindo a largura de um

    Definindo a URL de longa descrição do conteúdo do

    Definindo o tamanho das margens laterais: marginwidth

    Assim como é possível atribuir um determinado valor às margens superiores e inferiores, o mesmo vale para as margens laterais direita e esquerda. Nesse caso, o atributo utilizado é o marginwidth e o valor também deve ser informado em pixels.

    Definindo o nome de um

    Especificando qual conteúdo deve ser exibido no

    Como inserir vídeos do YouTube em uma página?

    A utilização do elemento

    Perceba que além do endereço do vídeo, também foi preciso utilizar o atributo allow com uma série de autorizações para que o vídeo possa ser executado da maneira adequada. Além disso, foi utilizado o atributo allowfullscreen para que a alternativa de exibir o vídeo em tela cheia possa funcionar corretamente.

    Por fim, temos algumas formatações de largura, altura e borda, que também podem ser melhoradas por meio da aplicação de estilos CSS.

    Target links: como criar iframes interativos?

    Os iframes também podem ser utilizados de forma interativa, ou seja, a pessoa usuária da página pode clicar em um link que fará a chamada ao conteúdo para ser exibido no

    Escolha outro artigo para ler.

    Como manter o foco para estudar ou programar?

    Perceba que a modificação no conteúdo do