É correto usar iframe?

[Marcos Junior 0]

Afinal, usar iframes é correto ou não?

 

Se é correto, qual é a forma certa e a hora certa para usar iframes?

[Thiago Retondar 18]

A única utilidade que vi para iframes foi aqueles editores tipo o TinyMCE que usam iframes para deixar o negrito, itálico, etc. visíveis na hora.

 

Aquelas outras funções básicas, eu preferia usar AJAX.

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Marcos Junior 0]

A única utilidade que vi para iframes foi aqueles editores tipo o TinyMCE que usam iframes para deixar o negrito, itálico, etc. visíveis na hora.

 

Aquelas outras funções básicas, eu preferia usar AJAX.

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

Thiago, você afirmou que você prefere usar ajax.

 

Web Semanticamente falando, é correto ou não usar iframe ?

[Desnickadu 0]

alguns scripts externos [tipo guestbook, mural de recados e afins] em sua maioria só aceitam inclusão em site por iFrame...

eu coloquei um muralzinho no meu site e só da pra por usando iFrame, nenhuma linguagem server/client chama aquela bo**** >:S

 

 

em todo caso, o iFrame serve unicamente pra você 'chamar' urls que estão fora do seu dominio[site].

 

o frame que era usado pra modular o site hoje é substituivel por qualquer linguagem server side ou JS.

 

não é semanticamente errado usa-los, pois é pra isso que els servem, mas existem soluções melhores [dependendo do caso] hoje em dia ;)

[Thiago Retondar 18]

Nunca estudei iframes, nunca tive paciência para eles, mas dá uma olha aqui http://forum.imasters.com.br/public/style_emoticons/default/seta.gif http://forum.imasters.com.br/index.php?/topic/202508-iframe-e-valido-nesta-nova-onda-do-webstandarts/

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Evandro Oliveira 331]

se não tivessem sua utilidade, não seriam sequer construídos, concorda?

 

em todo caso, o iFrame serve unicamente pra você 'chamar' urls que estão fora do seu dominio[site].

[2]

 

leve em conta que buscadores não lêem o conteúdo do frame ;)

[Bergs 53]

desde que fiz meu curso de html entendo que iframe serve para chamar uma outra página para dentro de uma digamos pricipal, vejo grande utilidade em usar iframes por ex: chamar um conteúdo que será visto em todas as páginas por iframe minimiza a repetição do código em todas as páginas ^_^

[Marcos Junior 0]

Exemplo:

 

O desenvolvedor resolve usar ajax porque acha que usar iframe é ridículo.

 

Como fica se o javascript do browser do usuário estiver desabilitado?

 

Não seria mais feliz o desenvolvedor ter usado iframe?

[Desnickadu 0]

iframe é diferente de frame

 

como disse no outro post, iframe serve para chamar uma pagina que não esteja no dominio do seu site

quem faz isso que Bergs/Marcos falaram é o frame.

 

 

pra fazer esse esquema de 'chamar' paginas do seu site dentro de uma master [sistema conhecido como Master Page] vcs podem utilizar PHP, ASP, ColdFusion, Perl, Python, Rubi ou qualquer outra linguagem server side, assim mesmo que o BIOS[vulgo usuário] não esteja com JS ativado ele navega normalmente.

[Paulo de Tarso F. M. 24]

Semanticamente falando não é correto utilizar <iframe>. Em compensação, atualmente não temos uma solução capaz de atender às necessidades que seja totalmente válida de acordo com os padrões mais restritos (XHTML Strict).

 

O <iframe> foi criado pela Microsoft e foi a primeira tecnologia capaz de embutir outra página dentro de outra. Por se tratar de uma tag proprietária, outros browsers não ofereciam o suporte para a mesma. Mas aí veio a hegemonia da Microsoft em relação ao mercado de browsers, e com isso a maior parte dos desenvolvedores passaram a utilizar o <iframe> justamente porque o IE era o browser mais utilizado ao redor do mundo.

 

Só que tempos depois a história começou a mudar, o trabalho do W3C começou a ganhar força na questão da disseminação dos padrões web e a tag <iframe> não tinha sido incluída em nenhuma especificação justamente pelo motivo de ser uma tag proprietária. Mas houve uma, digamos, manifestação dos desenvolvedores em prol do uso do <iframe> (pois a maioria já utilizava) e da possibilidade de se validar um documento que o utilizasse. Criaram então um padrão "meio termo", o Transitional, que permite a utilização de tags proprietárias e outros elementos que hoje, de acordo com os padrões mais rigorosos, sua utilização não é mais permitida.

 

Enfim, ainda não temos algo que seja realmente funcional e que seja crossbrowser. A única solução que tentou chegar perto desse propósito é a tag <object>, mas infelizmente não é renderizada corretamente pelos browsers, cada um renderiza de uma maneira completamente diferente (isso quando renderizam alguma coisa... http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif).

 

Bom, é isso. Espero que tenha esclarecido um pouco essa questão de "pode/não pode", dando um embasamento mais histórico explicando o porquê o <iframe> não é permitido. Entretanto, ainda não temos uma solução que seja 100% funcional em todos os browsers que possa embutir o conteúdo de uma página dentro de outra. Então, quem precisa, utiliza. Quem pode utilizar Ajax, assim o faz. E assim caminha a humanidade...

 

http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

[Jefrey 0]

isso é novo para mim. sempre utilizei o IFRAME, e dei preferencia.

qndo uso OBJECT, como faço TARGET para ele?

vejam este site. eu o fiz todo com IFRAME.

[Evandro Oliveira 331]

Márcio, teu sistema suporta PHP. É muito mais inteligente e prático criar um sistema de main page como já foi sugerido.

[Jefrey 0]

Evandro, como nao vi nenhum Marcio neste topico, considerei que voce fala comigo, pois o site e do Marcio.

O site e feito inteiramente com IFRAMES por uma questao de leveza. Note que as paginas chamadas por essa funçao estao no mesmo servidor, porem, em outro diretorio. Assim, nao e necessario atualizar a pagina a cada mudança de link. O que muda e so no IFRAME. Note que as paginas dinamicas (como o livro de visitas) tambem estao no mesmo diretorio.

Para mim, o IFRAME economiza trabalho. Assim, nao preciso fazer pagina por pagina, pois uma so chama as outras.

Alem disso, note que no caso do site citado por mim acima, o uso do IFRAME economizou trabalho tambem na inclusao do proprio, pois se eu usasse FRAME, teria que abrir e fechar FRAMESETS ate conseguir chamar outra pagina para ficar justamente naquela posiçao. Com o IFRAME, foi so inclui-lo, configurando altura e largura, e pronto.

Repetindo a duvida, tem como direcionar links para abrirem em um OBJECT ou EMBED, como o TARGET direciona para o FRAME ou IFRAME?

Eu continuo utilizando IFRAME. Veja este outro site.

[Evandro Oliveira 331]

Jefrey, primeiro de tudo minhas desculpas pela desatenção. Me referia sim a você.

 

Quando falamos em webstandards, mencionamos uma prática que deve se submeter a algumas regras.

 

A 'linguagem de programação web', possui um órgão regulamentador e normatizador que define como devem ser tecidos os documentos HTML para exibição na web.

 

Esse órgão é a o Consórcio da Internet ou World Wide Web Consortium, comumente abreviado como W3C.

 

Essas normas e regras definem que nós devemos fazer uso de etiquetas (tags) que demarquem (markup) palavras, trechos, frases, parágrafos e blocos de nosso texto (hypertext) de modo que esse trecho possa ser corretamente lido e processado por um dispositivo não humano.

 

Quando você lê "Rua dos bobos, 0.", você sabe que se trata de um endereço, pois possui - de certa forma - um algoritmo de reconhecimento que particiona a informação:

 

RUA - Logradouro, define uma via de pequeno a médio porte que pode abrigar várias localizações tanto comerciais quanto residenciais.

 

DOS BOBOS - Identificação do logradouro.

 

0 - Código ordenador de lote.

 

Quando juntamos as três informações, sabemos que se trata de um endereço. Para que uma máquina, que está processando o texto (o Google, por exemplo) possa saber que tal texto se trata de um endereço, você deve marcá-lo (markup) com uma etiqueta (tag) apropriada, a etiqueta de endereço: <address></address>

 

Toda essa missa toda, foi para tentar lhe explicar a real necessidade/utilidade de se escolher bem as tags a serem aplicadas. Quando você consegue caracterizar - com riqueza de detalhes - todas as informações que serão dispostas no seu documento WEB, você pode dizer que tem uma marcação semântica.

 

Partindo do ponto que temos um órgão regulamentador, podemos deduzir que, se todos seguirmos as mesmas regras, teremos uma concordância fluida nos documentos da Web, de modo que, basta que você leia as especificações e seja capaz de criar o seu próprio mecanismo de exibição de páginas web!

 

Aconteceu que, para atender a certas necessidades de integração Sistema Operacional-Navegador, a Microsoft criou uma tecnologia capaz de incorporar quadros em linha, em qualquer parte do documento. Foi a (perfeita) explicação dada pelo colega Paulo de Tarso.

 

Onde estou querendo chegar com tudo isso é que, se você pretende realmente ser um bom desenvolvedor web, você deveria abandonar certos vícios e costumes que, se por um lado facilitam no desenvolvimento específico, dificulta o desenvolvimento geral.

 

Futuramente você pode vir a ter que trabalhar com tecnologia para dispositivos móveis, empresas que são mais exigentes quanto à natureza da marcação empregada, integração XML + HTML (conhecido como XHTML) e começará a encontrar problemas e dificuldades caso relute em se adequar aos padrões.

 

Para resumir, não é de todo errado utilizar iFrames mas, você tem outras opções que são consideradas mais apropriadas para o tipo de uso que necessita.

 

Se você fizesse esse tipo de encorporação via arquivos de texto puro, com AJAX, poderia lhe citar algumas vantagens sobre iFrame:

 

- velocidade no carregamento das páginas

- menor consumo de dados, haja vista que os documentos de conteúdo, não precisam levar os cabeçalhos HTML

- compatibilidade mais abrangente

- tecnologia recente, amplamente aplicada na Internet atualmente

- estilizar o contêiner que vai receber o conteúdo com CSS é muito mais fácil que estilizar um iFrame

- uso de elementos previstos nos padrões, o que garante um comportamento quase idêntico em todos os navegadores

 

Considerando que existe uma outra alternativa, melhor ainda, que é o sistema de página-contêiner + adição de conteúdo via server-side, vou citar apenas as vantagens que esta última tem sobre o uso de AJAX

 

- possibilidade de armazenamento do conteúdo em banco de dados, aumentando a segurança e velocidade do sistema

- possibilidade de se criar um painel de controle, onde se modificam e insere novas informações de forma amigável

- possibilidade de se gerar menus dinâmicos, com base no conteúdo e na página atual

- não se perde pontos com SEO

- a responsabilidade de gerar as páginas fica a cargo do servidor, não do cliente

 

 

segue um exemplo de página com AJAX e outra com processamento Server-Side, utilizando a linguagem PHP.

 

Para ambos os modelos, vamos utilizar esses três arquivos em comum:

home.txt

Bem vindo ao meu site pessoal! Aqui você encontrará informações sobre mim, e também meu portfólio. Boa navegação!

contato.txt

Entre em contato, deixe uma mensagem!
<form action="" method="post">
    <dl>
        <dt><label for="contato_nome">Nome</label></dt>
        <dd><input type="text" id="contato_nome" name="nome"></dd>
        <dt><label for="contato_mensagem">Mensagem</label></dt>
        <dd><textarea id="contato_mensagem" name="mensagem" cols="40" rows="20"></textarea></dd>
    </dl>
    <button type="submit">Enviar mensagem</button>
</form>

folio.txt

Lista de trabalhos
<ul>
    <li>cliente 1</li>
    <li>cliente 2</li>
    <li>cliente 3</li>
    <li>cliente 4</li>
</ul>

tendo esses três documentos em comum, a diferenciação entre AJAX e Server-side fica a cargo da página INDEX.HTML/INDEX.PHP

 

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http-~~-//www.w3.org/TR/html4/strict.dtd">
<html>
   <head>
       <title>Exemplo de páginas dinâmicas com AJAX</title>
       <meta http-equiv="content-type" content="text/html; charset=utf-8">
       <script>window.onload = function(){
           /* Compatibilidade AJAX para Internet Explorer */
           if(!window.XMLHttpRequest){var XMLHttpRequest=function(){var b=null,a=new Array("MSXML2.XMLHTTP.7.0","MSXML2.XMLHTTP.6.0","MSXML2.XMLHTTP.5.0","MSXML2.XMLHTTP.4.0","MSXML2.XMLHTTP.3.0","MSXML2.XMLHTTP","Microsoft.XMLHTTP");do{try{b=new ActiveXObject(a[0]);}catch(c){a.splice(0,1);}}while(a.length && b===null);return b;};}
           var ajax = new XMLHttpRequest;
           ajax.onreadystatechange = function(){
               if(ajax.readyState == 4 && ajax.status == 200) document.getElementById('conteudo').innerHTML = ajax.responseText;
           }
           var links = document.getElementById('menu').getElementsByTagName('a');
           var linkAjax = function(el){
               el.onclick = function(){ ajax.open('GET',el.href,true); ajax.send(); return false; }
           }
           for (var i = 0, ln = links.length; i < ln; i++) new linkAjax(links.item(i));
       }
       </script>
   </head>

   <body>
       <ul id="menu">
           <li><a href="home.txt">Home</a></li>
           <li><a href="contato.txt">Contato</a></li>
           <li><a href="folio.txt">Portfólio</a></li>
       </ul>
       <div id="conteudo">Clique em um item do menu para iniciar</div>
   </body>
</html>

 

index.php

<?php

$pgs = Array('home','contato','folio');
$pg = (empty($_GET['pg'] || !in_array($_GET['pg'],$pgs)? 'home' : $_GET['pg'];

?><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http-~~-//www.w3.org/TR/html4/strict.dtd">
<html>
   <head>
       <title>Exemplo de páginas dinâmicas com PHP</title>
       <meta http-equiv="content-type" content="text/html; charset=utf-8">
   </head>

   <body>
       <ul id="menu">
           <li><a href="./?pg=home">Home</a></li>
           <li><a href="./?pg=contato">Contato</a></li>
           <li><a href="./?pg=folio">Portfólio</a></li>
       </ul>
       <div id="conteudo"><?php include $pg . '.txt'; ?></div>
   </body>
</html>

 

Note que são exemplos bem simples, mas que atendem a sua necessidade, sem muitas dificuldades e respeitando os padrões.

[Apenas Eu 13]

entao...o iframe permite o site ficar leve mesmo, porém o posição no seu site pelo google pode ser prejudicada, o que talvez não seja muito bom.

Por exemplo, alguns anuncios que coloquei em meu site, eram feitos por iframe. Por coincidencia ou não, quando eu colocava estes anuncios, os acessos caiam bem. Após tirá-los, voltava a subir.

Sobre isso, o atendimento desde site anúncios me informou que o iframe prejudica muito pouco, que nem precisava me preocupar. Mas como meu site ainda não tem muitos acessos, esse "pouco" foi expressivo.

[Henrique Barcelos 290]

Outra coisa relevante ao se utilizar iframes: as páginas carregadas dentro do iframe fica armazenada no histórico do navegador do indivíduo.

 

E se o cara tá lá buscando alguma coisa no histórico e acha uma página do seu site que é só uma parte do conteúdo e que fica dentro do iframe?

Nada vai impedí-lo de tentar abrir a tal página.

 

O resultado: ele vai ver um pedaço da página só, vai ficar perdido, com raiva e nunca mais volta no seu site.

 

Sobre a questão de 'leveza', na boa, quantos kB tem uma página HTML? 8, 10, 20... com muita boa vontade...

O que pesa mesmo são imagens, sons, animações, talvez o CSS e o Javascript, mas TUDO isso fica armazenado no cache do navegador à primeira visita.

 

Se você não pode MESMO atualizar toda a página, o Ajax tá aí pra isso.

Eu sou um Ajax fan, utilizo bastante e você vai perceber que é muito melhor quando se tem controle sobre o que está acontecendo.

Um iframe é basicamente estático, com Ajax a coisa fica totalmente dinâmica, você pode atualizar o conteúdo em um dado intervalo de tempo, pode informar ao usuário o que está acontecendo...

 

O único uso para iframes que eu encontro hoje são aqueles 'gadgets' para incluir previsão do tempo, cotação da bolsa, etc., sendo que muitos hoje já são puro javascript.

 

Colocar um iframe lá no seu site só para não carregar a página inteira diminui a usabilidade.

Muitos celulares hoje já tem acesso rápido a internet e navegadores próximos aos de PCs comuns.

Agora bota um iframe lá pra você ver o que acontece...

[Jefrey 0]

Ainda estou com duas dúvidas:

 

1. Mas, o Inline Frame pode ser "excluído, despachado" dos browsers?

2. Você poderia me dar um exemplo de como usar Ajax no lugar do iFrame?

 

Para a minha sorte, eu ainda tenho tempo para aprender outras coisas assim, porque não trabalho com isso (tenho nem 15 anos ainda) e o conhecimento é gratuito (fora o alto valor da internet...). O tempo está do meu lado... não está?.. :ermm:

[William Bruno 1501]

1. Mas, o Inline Frame pode ser "excluído, despachado" dos browsers?

já foi banido do xHTML Strict

 

 

2. Você poderia me dar um exemplo de como usar Ajax no lugar do iFrame?

assim:

http://forum.imasters.com.br/index.php?/topic/403171-pagina-dentro-de-div-ajax-problema-ao-atualizar/page__view__findpost__p__1581230

 

e oque o Evandro já postou.

[- KbeçãO - 0]

bom...

eu n web designer profissional...

então eu tbm cai na pegadinha do iFrame..

pq uso o iFrame para que so o conteudo seja carregado no centro da pagina..

e que o layout continue estático...

ate achei um codigo que redimensiona o iFrame...

tendo em vista que conteudos de pagina diferente, tem temanhos diferente...

mas nunca tinha me atinado para oq disseram acima sobre o usuario pesquisar no historico e abrir so o conteudo...

x/

entao terei que mudar meu modo de trabalhar, e colocar o layout em cada pagina, e chama-la qdo o user clicar em algm botao do menu ???

Oo

me lasquei...

[William Bruno 1501]

entao terei que mudar meu modo de trabalhar,

sim, certamente.

 

colocar o layout em cada pagina, e chama-la qdo o user clicar em algm botao do menu ???

não necessariamente.

Por isso dá pra fazer com ajax, ou com includes server-side (php, asp..)