52

Bom, comecei a desenvolver WEB a pouco tempo, digamos 1 ano.. e aqui na empresa utilizamos muito frames e iframes... sei que na visão de HTML5 os frames estão obsoletos, mas ainda vejo muita gente defendendo o uso deles..

  1. Gostaria muito de saber o por que deles serem motivo de tanto debate, quais seus benefícios e malefícios na hora de se desenvolver..

  2. Se o frame está obsoleto, qual é o seu substituto na visão de HTML5?

Se para o HTML5 os frames estão obsoletos, deve ter uma resposta plausível do porque.

6
  • 5
    O psicólogo Abraham Maslow cunhou uma frase que descreve perfeitamente esta situação: 'Suponho que seja tentador, se a única ferramenta que você tem é um martelo, para tratar tudo como se fosse um prego.' Os que gostam de (e confiam nos) frames/iframes irão continuar defendendo o uso.
    – OnoSendai
    Commented 21/08/2014 às 15:40
  • 2
    A questão do tópico é: quais seus benefícios e malefícios?... e porque foi considerado obsoleto? Commented 21/08/2014 às 15:42
  • 2
    Relacionado: Qual é a alternativa moderna aos framesets?
    – user7261
    Commented 21/08/2014 às 16:17
  • 1
    @AndréLeria veja a revisão e entenderá o comentário.
    – Mansueli
    Commented 21/08/2014 às 21:07
  • 5
    frames e iframes são dois conceitos bem diferentes, pena que nenhuma das respostas abordou bem o assunto, inclusive falo do iframe como solução moderna para substituir o frame aqui: pt.stackoverflow.com/a/15174 -Não só o iframe tem seu lugar, como é uma alternativa moderna (tanto que ganhou novos poderes com o HTML5). O próprio SOpt e muitos outros sites usam da maneira correta.
    – Largato
    Commented 2/07/2016 às 20:18

7 Respostas 7

53

O principal motivo para frames e iframes serem má-prática é que eles não são acessíveis nem indexáveis por motores de busca.

Se um motor de busca começa a "ler" sua página e chega a um iFrame, ele pula esse conteúdo. Ele não consegue entrar na URL e indexar aquela outra página. Ele vai indexar separadamente, então se uma pessoa busca o termo no site de pesquisa, pode cair direto naquele frame e não na página inteira.

Se um leitor de tela passa lendo o conteúdo para o cego, ele também não vai conseguir ler o conteúdo de dentro do iFrame.

Frames não são usados desde que se usa includes ou masterpages. Como o frameset servia para facilitar a manutenção ao ter um mesmo arquivo de topo, menu e rodapé, não faz sentido continuar usando algo inacessível e não-indexável se a linguagem de programação já renderiza a página com toda informação necessária, pegando sempre de um mesmo arquivo.

Ainda assim, são usados no caso de barra do topo de portais ou vídeos do youtube, por exemplo, porque esses players dependem de oturos arquivos como javascript e CSS próprios. Outros casos usam javascript para fazer a chamada ao conteúdo, com ajax por exemplo, mas isso também não é indexável por robôs de busca, nem acessível ao cego (depois do refresh o leitor não repasssa a página toda), mas é mais fácil de manipular com CSS.

Quando faço um site simples, de HTML puro, acabo usando um pouco de PHP só para esses includes. É fácil, simples e toda hospedagem linux roda PHP. Também é fácil de rodar no PC, usando o xampp por exemplo.

1
  • 1
    um site simples de HTML puro pode ter includes simples de HTML :) não precisa ter PHP, senão vai deixar de ser de HTML puro.
    – dippas
    Commented 4/07/2016 às 16:52
26

Quando os frames "brilhavam"

Frames foram muito usados em páginas estáticas, onde não é possível fazer include no servidor.

Por exemplo, num site em HTML puro, cabeçalho, rodapé e menu devem ser repetidos em cada página. Isso era um grande problema e o frame resolvia isso perfeitamente, além de economizar no tempo de carregamento.

Softwares como o Dreamweaver mitigavam esse problema ao permitir que gerássemos todas as páginas do site a partir de um template, alterando apenas o conteúdo de cada uma delas.

Hoje, onde qualquer servidor possui pelo menos PHP, é melhor usar algum CMS (Content Management System) ou então simples includes para construir a página e acrescentar automaticamente cada elemento necessário à ela.

Falta de padrão

Frames também são ruins porque quebram o modelo tradicional da web de conteúdo, ao exibir várias páginas independentes numa mesma tela.

Isso pode gerar problemas de usabilidade, principalmente porque pode não ser intuitivo para ele, ainda mais se ele costuma usa os botões voltar e avançar.

Os frames também são pouco intuitivos porque podem misturar conteúdo de domínios diferentes e nem sempre é claro para o usuário que um determinado frame pertence a um site diferente.

Complexidade no desenvolvimento

Em minha própria experiência trabalhando com sistemas bancários vejo que usar frames costuma gerar problemas em algum momento.

O frame dificulta o desenvolvimento em vários aspectos:

  • Muitas vezes é necessário que um frame comunique-se via Javascript com outro, isso pode causar problemas vários problemas, desde XSS até a mistura de versões e instâncias de bibliotecas Javascript (como jQuery) nos diferentes frames.
  • Frameworks component-based como JSF ou Struts podem ter comportamentos inesperados quando usados em frames diferentes. pois não são desenhados para isso.
  • Restrições de segurança nos navegadores geral falhas e comportamentos inesperados.
  • Redirecionamentos resultantes de ações no sistema não funcionam bem em frames, já que apenas o frame seria redirecionado. Muitas vezes é preciso criar código adicional e complexo para fazer um redirecionamento "global" da página.

Enfim, os cenários acima foram apenas alguns casos que consegui me lembrar.

Sobre indexação em buscadores

Os buscadores conseguiam identificar os diversos frames (se fossem estáticos) ou então pelo menos através de algum mapa do site.

Como já foi mencionado, havia um problema quando um visitante entrava no site direto em uma das páginas que não é o frameset principal.

Nesse caso, muitos sites usavam um Javascript para verificar se o frame principal estava lá e, em caso negativo, redirecionava o usuário para a raiz do site. Lembro-me de que isto costumava gerar vários problemas de usabilidade.

Exceção para iframes

Ao contrário dos frames tradicionais, os iframes possuem alguns casos de uso válidos, sendo o principal permitir a renderização independente de um local da página de forma segura, isto é, sem que o conteúdo daquele local possa interferir com o restante da página.

Esta técnica é bastante usada em sistemas de propagandas (advertising) digitais, tal como o Google AdSense.

A vantagem do iframe é que ele não deixa o site principal mais lento e não permite que o site altere informações no banner de propaganda e vice-versa.

Na Atlassian, produtos como JIRA e Confluence quando usados na Nuvem não podem ter plugins instalados diretamente como na versão para servidor. Porém, a empresa desenvolveu a tecnologia chamada Atlassian Connect que consiste justamente na possibilidade de estender os produtos adicionando frames em locais estratégicos que recebem somente as informações selecionadas do contexto da página. O restante da comunicação é feito usando RESTful Web Services e Web Hooks.

Portanto, diria que a principal aplicação dos iframes hoje é integração entre diferentes aplicações web de forma segura e independente. Esta abordagem tende a crescer com as novidades do HTML5 que permitem criar um sandbox mais restritivo e, portanto, seguro para determinados usos.

Algumas bibliotecas também usam iframes para simular requisições AJAX quando o navegador não suporta certas funcionalidades. Por exemplo, o JQuery File Upload faz isto para submeter arquivos se o navegador não suporta a tecnologia mais moderna para fazer uploads assíncronos. Entretanto, este uso tende a desaparecer na medida em que os navegadores evoluem.

16
+50

Eu não considero uma má prática e sim ferramentas que podem ser utilizadas em determinadas situações, assim como o div e outras tecnologias novas serão utilizadas conforme a necessidade. Por exemplo, se eu preciso criar um uma intranet simples com poucos recursos e em pouco tempo e que independe de indexação por robôs e não tenho necessidade de utilização de leitor de tela, acredito que o uso de frames e iframes não seja uma má prática.

Ferramentas antigas não deixam de ser ferramentas, apenas se tornam mais uma opção de ferramenta em uma necessidade.

1
  • 2
    Acho que aí está a idéia da má pratica, o frame pode ser usado se ... e ... e ... sem problema. Mas se vc já adquiriu prática com outras altenativas elas atendem os casos que o frame não atende e também os que ele atende
    – Caputo
    Commented 26/08/2014 às 21:05
12

lendo esses posts eu descobri exatamente o que procurava, e agora eu posso dizer que o uso do iframe em algumas situações é melhor. Por exemplo: Conteúdo não acessível/indexado pelos motores de busca, como a Marta citou.

Meu problema foi resolvido com o uso do iframe da seguinte maneira:

Tenho um site que exibe bloco de anúncios e registra a exibição quando a página é carregada. No momento, um cookie é gerado com o id do anúncio e somente é registrado após um tempo, que é determinado pelo tempo médio de visualização das páginas.

O problema é que os bots "bombardeiam" os sites diariamente e eu não conseguia filtrar quem era bot, ou visitante real. Eu até tinha uma média das exibições após várias análises, mas nunca era o real.

Quando modifiquei meu sistema, passei a exibir os banners através de um iframe que incluía o script que estava em uma página separada. Após isso, percebi que o número de exibições caiu drasticamente, passando a registrar as exibições corretamente.

Para mim, o uso do iframe foi perfeito.

1
  • 5
    +1 É um bom exemplo de que boa prática é balela. Temos várias ferramentas. Tem quem sabe usar a ferramenta certa pro caso certo, e tem os caras das boas práticas, que só usam marreta. Pra saber a certa, tem que conhecer quais as vantagens e desvantagens de cada uma. E "boa prática" não mostra nada disso, é apenas um sinônimo de "como eu nao sei o que eu tou fazendo, vou seguir os caras famosos".
    – Largato
    Commented 2/07/2016 às 20:24
8

Sempre foi errôneo afirmar que os mecanismos de busca não indexam iframes.

O problema é a forma como essa informação foi sendo passada de forma desleixada ao longo dos anos.

Como os framesets são realmente obsoletos, vou comentar somente sobre os iframes.

Sobre indexações, o fato é, um iframe, quando indexado, não traz informação de qual a janela parent. Então nos resultados da busca (google por exemplo), vai aparecer o link direto para a página do iframe. O usuário cai direto nessa página sendo que ela é apenas uma parte integrante de outra janela e pode possuir funcionalidades que dependem da página parent.

O problema era somente isso e foi anunciado recomendações e cautela no uso de iframes e SEO. Só isso. Então alguém passou a informação de forma muito descuidada (foruns, blogs, etc) resumindo que o iframe era má prática e ponto final. Aí estourou a porteira e não teve como conter a boiada.. rsr.. Um copia e repassa o que o outro posta e assim a coisa foi se espalhando.

O iFrame continua sendo útil e recebeu novas funcionalidades no HTML5. É um recurso muito útil para quem sabe usar e toma cautela com as desinformações que espalham pela internet.

No caso das indexações, para resolver o "problema" de abrir diretamente sem a página parent, com um simples JavaScript resolve-se verificando se existe a página parent. Se não existir, redireciona para a página parent e está tudo resolvido. Deve tomar cuidado em especificar o canonical, e outras tags que informam que é uma página que possui outro link para onde a indexação deve apontar. Assim evita ser penalizado pelos motores de busca. Mas esse é apenas um cuidado extra caso o SEO seja realmente importante para a página específica do iframe. Se não tem importância a questão do SEO, apenas ignore.

0
7
  1. Como já respondido aqui, existem vários problemas técnicos (como, por exemplo, acessibilidade).
  2. Vou colocar aqui diversos possíveis substitutos para frames e iframes:

    • div: fazendo bom uso de CSS e manipulação do DOM, divs se tornam basicamente framesets mais flexíveis.
    • canvas: ideal no caso de framesets para multimídia.

Resumindo, os framesets eram opções boas na época em que não tínhamos tanta facilidade com JS e CSS. Hoje já temos soluções bem melhores se fizermos bom uso de todas as ferramentas à nossa disposição.

2

No Quesito desenvolvimento acessível, não é que o foco não consegue entrar no iframe, ele entra, porem tem um problema de comportamento que se difere entre navegadores. Fiz isso para resolver o problema.

Arquitetura para uso Acessível de IFRAME

Entrando no iframe e Saindo do iframe, são partes não visuais do código acessíveis por meio de leitores de tela, onde ao receberem o focus, seja por meio do uso da tecla tab ou Setas de navegação, o mesmo tem o focus direcionado para uma parte do conteúdo interna especifica dentro ou fora do iframe.

Se analisarmos, algumas páginas que dispõe do recurso de acessibilidade, não padronizam seus fluxos, por exemplo, o ideal é que o fluxo não sofra alteração independente da tecla que está sendo usada para navegar.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .