Os frames (frame em inglês significa moldura) são umas ferramentas que tiveram uma história dilatada no desenvolvimento de páginas web com HTML. De ser uma etiqueta não padrão passou a ser suportada por todos os navegadores e fazer parte das especificações de HTML. Por outro lado, o frame sempre foi uma utilidade para fazer páginas web de uso como mínimo controvertido, visto que tem certas desvantagens que muitas vezes são mais importantes que a indubitável praticidade.

Em qualquer caso, em CriarWeb.com já falamos suficiente sobre a etiqueta Frame e tratamos amplamente suas vantagens e inconvenientes. Neste artigo iremos falar de uma etiqueta "irmã" que é atualmente muito mais usada, porque é mais útil e menos problemática que os próprios frames. Trata-se de iframe, uma tag incluída nas especificações de HTML 4.0.

Nota: iframe vem de inline frame, porém em português também se poderia chamar de frames flutuantes

Referências sobre a etiqueta frame:

Frames em HTML
Vantagens e inconvenientes do uso de frames
Frames - Explicação básica
Frames sem bordes
Frames - Atributos avançados
Atualizar dois frames com um só link
Frames - Uma página em cada moldura
...

Teoricamente iframe serve para criar um espaço dentro da página onde se pode incrustar outra web. É um quadrado cujas dimensões o desenvolvedor deve especificar na própria etiqueta iframe, que tem associada uma página web que se carrega em tal espaço. Essa página web terá seus próprios conteúdos e estilos, independentes do contexto onde se está mostrando. Ademais será perfeitamente funcional: se tiver links se mostrarão nesse mesmo espaço e se tiver scripts ou aplicações dentro se executarão também de maneira autônoma no espaço reservado ao iframe.

Exemplos de uso de iframe

Iframe se utiliza em muitos contextos. Dentro de um iframe podemos mostrar conteúdos de outras páginas, como se estivessem na nossa, como por exemplo:

• Códigos de banner, que se invocam por meio de um iframe pedindo os dados do banner geralmente a um servidor de banners que pode estar em outra rede.
• Visualizar conteúdos de terceiros, como blocos de notícias ou novidades que oferecem em outras webs.
• Interfaces de usuário, em que certas atividades se realizam de forma autônoma e o processamento está em outra página web.

Uso de iframe frente a frame

Atualmente, a etiqueta iframe se utiliza mais que a etiqueta frame, porque não dá tantos problemas como esta. A diferença principal está baseada em que a etiqueta iframe não necessita uma declaração dos espaços dos frames ou frameset, porque se incrusta no código HTML da página. O iframe, portanto, não provoca problemas de navegação, como os que ocorrem com os frames normais se não se entra corretamente através do frameset.

Também, já que não existe o frameset nos iframes, não sofre os problemas do uso de frames, sobretudo na hora em que a página é indexada nos motores de busca.

Por dizer de alguma maneira, trabalhar com iframe ou frames flutuantes é tão simples como fazer uma tabela, que se codifica dentro da construção HTML, com seu espaço reservado dentro da página. Sendo assim, a única diferença com respeito a uma tabela é que o conteúdo do iframe se extrai de outra página web.

Construção da etiqueta iframe

Como dissemos, o iframe se coloca diretamente no código HTML, no lugar onde quisermos que apareça.

Coloca-se um código como este:

<iframe src="pagina_fonte.html" width=290 height=250>Texto para quando o navegador não conhece a etiqueta iframe</iframe>


Como se vê, os atributos principais de iframe são a página web que se mostrará no espaço e a largura e altura da moldura que reservemos para o frame flutuante.

Como se pode ver, a etiqueta iframe tem sua correspondente etiqueta de fechamento. Todo o texto que colocarmos entre a etiqueta de início e a de fechamento será texto alternativo, que só se mostrará no caso em que o navegador do visitante não aceite a etiqueta iframe.

Todos os atributos de iframe

Estes seriam os atributos disponíveis para a etiqueta iframe:

src: Para indicar a página web que se mostrará no espaço do frame flutuante.

width: Para definir a largura da moldura do iframe

height: Para definir a altura do iframe

name: Para especificar o nome do frame, que podemos utilizar logo para nos referirmos a ele com o target dos links, ou mediante javascript.

id: Para indicar o identificador do iframe, e poder nos referir a ele através de javascript.

frameborder: para definir se queremos ou não que haja uma borda no frame. Os valores possíveis são 0 | 1. frameborder=0 indicaria que não queremos borda e frameborder=1 que sim que queremos.

scrolling: indica se se quer que apareçam barras de deslocamento para ver os conteúdos do iframe completo, no caso em que não apareçam no espaço reservado para o iframe. Os valores possíveis são: yes | no | auto. O valor "yes" é para que apareçam sempre as barras de deslocamento ou barras de scroll, "no" serve para que não apareçam nunca e "auto" é para que apareçam só quando forem necessárias (é o valor padrão).

marginwidth: Para definir a margem à esquerda e direita que deve ter a página que vai dentro do iframe, com respeito à borda. Esta margem vai em pixels, porém prevalecerá a margem que possa ter atribuída a página web que mostremos no frame flutuante.

marginheight: o mesmo que marginwidth, porém neste caso para o tamanho da margem pela parte de cima e de baixo.

margin: para especificar alinhamento do frame, assim como se especifica para as imagens.

style y class: os atributos para definir o aspecto do iframe por meio de folhas de estilo css.

Para acabar, aqui vemos outro exemplo de iframe com uns quantos atributos mais:

<iframe name=meuframeflutuante src="colabora.htm" width=400 height=550 frameborder="0" scrolling=yes marginwidth=2 marginheight=4 align=left>Tu navegador nao suporta frames!!</iframe>