Iframe – O que é? Como usar?

Like
Like Love Haha Wow Sad Angry
2

IFRAME - O que é? Como utilizar? Pra que Serve?

Crie um Iframe para abrir uma página dentro de outra e exibir um conteúdo extra dentro de suas páginas.

O que é o Iframe
É um código HTML que faz com que uma determinada página seja aberta dentro de outra.
Trata-se de um código HTML, portanto só é possível utilizar um Iframe em páginas que aceitem HTML. Confira um exemplo.

Pra que serve
É muito útil quando é necessário inserir algum conteúdo dentro de uma página que não o comporta.

Como inserir o Iframe em uma página
Primeiramente é necessário que a página a ser incluída dentro do Iframe esteja em algum lugar na internet. Neste artigo estou utilizando uma página chamada iframe.html que está hospedada dentro do servidor do Criar Sites.

Depois acesse este link e copie o código e cole no local em que deseja que o Iframe apareça.

Altere os seguintes valores:
Name: Este é o nome do Iframe. Pode ser qualquer nome.
SRC: Link para a página que será exibida no Iframe
FrameBorder: Borda do Iframe. É recomendado deixar esse valor em Zero.
Width: Comprimento do Iframe.
Height: Altura do Iframe
Scrolling: Controla o aparecimento da barra de rolagem, altere para “no” caso não queira que ela não seja exibida.

Para que você entenda melhor o funcionamento, você pode acessar diretamente a página iframe.html que aparece dentro do utilizado no exemplo acima.

Dica
Se você pretende adicionar links dentro da página que aparece dentro do Iframe, é necessário que os links estejam configurados para abrirem em uma nova página (blank) ou para abrir em “parent” que faz com que o link seja aberto na mesma página em que o Iframe está sendo exibido.

Like
Like Love Haha Wow Sad Angry
2

Sobre Celso Lemes

Celso Lemes é Blogueiro profissional. Vivo de blogs, blogo para viver, vivo blogando, blogando eu vou vivendo.
 
Baixe grátis o e-book 12 Passos para Divulgar seu Site ou Blog.

Adicionar a favoritos link permanente.

102 Comments

  1. Olá gostaria de saber se voces tem modelos de codigos pronto, para iniciantes que queiram montar um site, estou tentando montar, mas estou encontrando algumas dificuldades,na pagina inicial e na galeria de fotos. (estou usando a linguagem PHP)

    se puderem me ajudar.

    Grata: Gina

  2. Gina,

    Não entendi direito sua pergunta, estou supondo que perguntou sobre templates. Aqui vai uma página com vários sites para baixar templates .http://www.criarsites.com/templates-gratis/

    Uma geleria de imagens simples que eu recomendo é o Gallery Thingie http://www.criarsites.com/galeria-de-imagens-gall

    Qualquer dúvida deixe outro comentário. Abraço!

  3. amigo por favor estou editando uma pagina so em html, estou com uma pequena duvida, eu não faço isso a muito tempo, bom eu estou criando uma pag para meu grupo bem simples so para msotrar nossa esistencia ao mundo, e no centro uso um iframe para que fique mais facil atualização, porem fora dele na pagina principal existe um menu eu gostaria que as novas paginas do menu abridem dentro do iframe, seria isso possivel sem a ajuda de php. pois o servidor é gratuito e não da suporte a php, so css e alguns scrip em java desde que nada demasiado.

    obrigado

  4. Ronaldo,
    Isso só é possível com programação ou com a ajuda do Front Page que faz isso por html.

    Para fazer isso clique em “Arquivo” > “Novo” > “Página ou Web”

    No menu que se abre a direita clique em “Modelos de Página”.

    Na nova janela clique na aba “Página de quadro” e escolha o estilo do seu site.

    Espero que consiga, Abraço!

  5. Boas..

    É possível actualizar o iframe? Por exemplo, ter um menu e quando carregamos no botão, o conteúdo do iframe é alterado.

    Obrigado
    Tiago

    • Tiago,
      É possível sim, no Front Page pode ser feito com facilidade, porém eu não sei os códigos necessários para fazer isso.
      Também não recomendo esse tipo de técnica por que seu site não seria indexado corretamente pelos buscadores.
      Abraço!

  6. Obrigado Celso,

    Como não recomenda esse método, conhece alguma maneira de actualizar apenas uma determinada parte da pagina, sem carregar a pagina completa?

    Obrigado,
    Tiago

  7. Tiago,
    O Iframe trás problemas porque os buscadores reconhecem a página dentro do Iframe como uma página diferente.
    Tem também o problema de que a página do Iframe não conterá o menu de navegação, dificultando que os buscadores encontrem a página em questão.

    A inclusão de páginas poderia ser feito por PHP com o comando include. O código abaixo carregaria uma página dentro de outra.
    <?
    include("arquivo.php");
    ?>

    Porém isso só funciona se for colocado em uma página em PHP.

    Como eu falei anteriormente, eu não entendo muito sobre isso, e não poderei lhe ajudar a criar algo assim.

    Abraço!

  8. estou tento problemas com as imagens esta dando erro ao carregar
    e fala q esse tipo de imagem n é aceita
    o tipo de imagem é Jpg

    me ajude obrigado

  9. Olá, parabéns pelo post.
    Eu uso um Iframe do blogspot dentro do web acappella. Como as os links abriam dentro do iframe coloquei um codigo pra todos os links abrirem em uma nova página. Acontece que se a pessoa por exemplo clicar em notícias antigas, vai abrir em uma nova página e mostra só o iframe.
    Vi que você citou o recurso parent.
    gostaria de saber como eu coloco isso no blogspot.
    Obrigado, desde já grato.

  10. Dante,
    O link deve ficar assim
    <a href="http://criarsites.com&quot; target="_parent">Criar Sites</a>

    Abraço!

  11. Valeu, eu coloco isso no blogspot certo?
    Se sim, e eu coloco o codigo no body ou no cabeçalho?

    Obrigado brother!

  12. Dante,
    Você deve colocar no local que desejar que o frame apareça. Que pode ser qualquer local que suporte html.

    Abraço!

  13. Celso, eu estava kerendo um codigo de uma pagina q quando vc abre o site lah vai estar ela, e qualquer outra pagina, do mesmo site, que vc entre ela vai estar la no mesmo lugar.

  14. Alberto,
    Eu não entendi a sua pergunta, tente se explicar melhor.

    Abraço!

  15. Celso,
    Rodei 1001 sites e blogs em busca de auxílio e não encontrei mesmo… O seu artigo é muito bem explicado e simples. Vc está de parabéns !!!
    Já indiquei para mais 2 pessoas q, assim como eu, estão com dificuldades em Iframes.
    Gostaria de tirar mais uma dúvida… É o seguinte:
    Estou a criar um site e nele vou inserir propagandas (Adsense, Mercado Livre, Etc.)
    Me corrija se eu estiver errado: Essas propagandas são inseridas no site através de um Script, certo ?
    Pois bem. É correcto eu usar o tal script que me for fornecido dentro de um Iframe, para facilitar a actualização, já que o Iframe eu vou colocar em todas as páginas ???
    Achei conveniente essa idéia, pois se todas as páginas chamarem um mesmo Iframe, poderei actualizar todas, em simultâneo. Oque acha ? Estou correcto ?
    Fiquei um pouco preocupado, pois li logo acima que Iframe atrapalham na Idexação por Motores de busca… Você acha que terei algum problema ???
    Muito Obrigado em desde já.

  16. Olá Celso !!!
    Passei para vos agradecer a atenção em responder meu post. Obrigado ! :mrgreen:
    Vou seguir vosso conselho e fazer mais umas pesquisas.
    Até logo e sucesso aqui no CS ! 😉

  17. Olá Celso,

    Estou fazendo um site com o Web Acapella e preciso fazer conexão com banco utilizando motor de busca feito em php. Gostaria de saber como faço para fazer essa conexão com o banco e como insiro esse motor de busca.
    Se não for possível inserir esse motor de busca em php, existe outro modo?

    Aguardo.

  18. Oi, gostaria de saber uma coisa:
    Eu tenho um blog que tem uma caixa de pesquisa, e estou pensando em por i-frame nele! Você sabe como eu posso fazer para o resultado das pesquisas apareçam dentro da pagina do i-frame?

    • Minako,
      Isso vai depender de como funciona essa caixa de pesquisa. Se os links abrirem na mesma página, você só precisa de adicionar a página de pesquisa no iframe.

      Abraço!

  19. Olá!!! existe alguma maneira de colocar no Blogger uma função, na verdade não sei o nome, mas é como nos sites. colocar um link dentro do blog e este abrir com a mesma estrutura daquele. so conseguir isto no Google doc, armazenei o arquivo lá, e postei o link no meu blog. mas abre um página em outra guia, gostaria que abrisse no meio do post. desculpe se não está bem claro, mas é que sou novo na área e não como se chama esse recurso, espero que tenham entendido.

    desde já agradeço

  20. guilherme gitotti

    Então celso , eu to com dificuldades , eu quero colocar um iframe em cima de uma imagem e não consigo , você podeira disponibilizar o codigo para mim? obrigado .

  21. Fiz uma página usando iframe, onde existe uma barra lateral esquerda que contém os links e o iframe a direita contendo o espaço onde as páginas devem ser carregas, quando clico no link aparece a página do zumodrive mas os arquivos não são exibidos, a menos que eu os carregue em outra “aba” ou janela, por que isso? A página não deveria ser carregada completamente?

  22. Ok, acho que tem a ver com o fato de ter um frame dentro de outro ja dentro de outro, vou estudar mais sobre isso.
    Valeu.

  23. Tudo bem Celso,

    Vê se pode me ajudar , tenho tres páginas criadas no cariboost sendo que na matrizgostaria que no meio dela abrisse as duas outras páginas ou somente o conteudo delas tem como isso?

  24. ea Galera.. queria saber como colocar um IFRAME no Blogspot SEM a barra de rolagem.. por exemplo quero que fique com width 100% e height 500 e entao coloco scrolling=’no’ mas não funciona.. alguem sabe pq ? ou será que o proprio blogspot não deixa.? vlw respondem ai

  25. Cesar Ribeiro

    Olá Celso,
    Primeiramente parabéns pelo trabalho.
    Estou com um problema com iframe e espero que possa me ajudar estou tentando abrir um iframe com combo box dentro.

    O usuario escolhe a marca, depois aparece o modelo e dependendo da escolha aparece o link, só que quando se clica no link que é gerado dinamicamente o iframe atualiza e some do quadro, carregando a pagina principal do site. Já tentei por em target blank mas não teve jeito. Há alguma forma para que isso não aconteça?

    Desde já agradeço a atenção.

  26. Alexandre Soares

    Olá!!! gostaria de uma dica se for possível, como faço para fazer um Iframe aparecer uma única vez como um pop-up com botão para fechar a janela?

    desde já agradeço

    • Alexandre,
      Neste caso eu creio que você não precise de um Iframe, mas sim de um script que abra uma página como se fosse uma popup.
      Infelizmente eu não sei onde esse tipo de script possa ser encontrado.

      Abraço!

  27. sobre a dica:
    “Se você pretende adicionar links dentro da página que aparece dentro do Iframe, é necessário que os links estejam configurados para abrirem em uma nova página (blank) ou para abrir em “parent” que faz com que o link seja aberto na mesma página em que o Iframe está sendo exibido.”

    como e onde eu insiro o (blank) ou “parent”, e isso funciona em um menu CSS???

    • Frank,
      Você teria que adicionar isso diretamente no código do link, por exemplo target=”parent”
      Não sou programador e não sei dizer como isso seria feito com CSS.

      Abraço!

  28. Celso o iframe nos sites do google não fuciona porque?

  29. Ola Celso,
    Gostaria de Saber se Tem Como Aparecer Apenas uma parte desejada entende se eu quisesse que mostrasse apenas o meio da Pagina tem Como?????
    Se Sim Fico Grato com sua Resposta.
    Abraços.

  30. bom dia!

    Estou colocando meu blog dentro do meu site (o mesmo ainda não esta publicado), fiz alguns testes e funcionou, porém quando vou testar a parte de comentários do blog, ele tira todo o menu do site.

  31. Olá celso por favor me dê uma dica ai, eu tenho um site de vendas pelo hd1, só que lendo os termos la informa que é proibido a utilização de iframes para quem usa os serviços do HD1, no caso o meu ste tem o botão de compra do pag seguro que quando o cliente clica nele é direcionado para a página de pagamento do pag seguro isso é um iframe? pois se for não poderei usar os serviços do HD1, por favor me ajude nisso, por favor.

  32. como criar uma pagina com iframe e dar refresh so na pagina que esta dentro do iframe sem dar refresh na pagina principal?

    • Adailton,
      Isso é possível, mas eu mesmo não sei como fazer.

      Abraço!

      • Gustavo Pantoja

        Tecnicamente, para Atualizar o Frame é Possivel, é Só Dar Um Clique direito ou esquerdo, o Clique que Vai as Opções, e Ir Num Sub-menu chamado “….. frame >” e clicar atualizar

        Isso é do Mozilla firefox, em Internet Explorer ainda estou em fases

        Obrigado e braços

  33. olá como faço para.
    1 add uma rádio web sem que ela pare de tocar no site qnd passar de pag ?

    2- add umplayer com músicas dentro do servidor sem que ela pare de tocar no site qnd passar de pag ?

    • Felipe,
      Para instalar uma rádio em seu servidor, você precisaria de uma hospedagem com streaming, o que é bem mais caro.
      Para aprender a instalar uma rádio que não reinicie quando o visitante muda de página, confira este artigo.

      Abraço!

  34. Tipo fiz tudo certinho mas qndo abro o blog principal e vai para a pagina q colokei no iframe.. como faço pra deixar no blog?

  35. Gustavo Pantoja

    Olhe eu Não Entendi, só um Pouco na Verdade
    Se Você Quiser Que Um Link Dentro do Seu Frame Abra na Janela e Substitua
    Coloca um Tarjet daquele que Abre Na Janela Completa,

    Caso Você Queira um Link que Só Abra no Seu Frame, coloque normal
    Se Você Quiser Colocar um Link dentro do frame, para linkar um outro frame, coloque o Nome desse frame que quer linkar e mandar direcionar para lá, Isso Deve Ter Aqui no Blog do Celso

    Não Sei se Ajudei, mas Abraços!

  36. Celso, gostaria de saber se seria possível utilizar iframes para exibir os banners dos parceiros do meu blog e, em caso positivo, se as visitas provenientes deles seriam computadas como vindas do meu blog ou se daria algum tipo de erro. A minha preocupação principal seria diminuir o peso total da página e diminuir o seu tempo de carregamento. Obrigado.

    • Isaias,
      Inserir os banners em um iframe não vai ajudar. O navegador dos visitantes terão que carregar o conteúdo do iframe de qualquer jeito.
      O ideal é que você otimize as imagens dos banners dos parceiros antes de inserir em seu site.

      Abraço!

      • tambem estou com essa dúvida celso será que por favor pode postar um código iframe de uma imagem com link? estou com uma dificuldade no meu blog que a imagem html nao está se ajustando só ajusta certo quando é iframe. muito obrigado.

        • Jefferson,
          O Iframe não serve para exibir apenas a imagem. Ele é usado para exibir uma página que contenha a imagem. Será que você não está confundindo algo?

          Abraço!

  37. Olá, como eu faço para posicionar o site dentro do iframe, para que apareça só uma parte especifica do site?

  38. Olá,

    Queria saber se tem como colocar um site inteiro no inframe, e não só uma janelinha… queria que em vez de abrir a pagina do blog, abra outro site. dentro de um blog. Tenho um site no wix, mas ele não tem opções de favicon e para colocá-lo .com.br é complicado. Então, iria colocar ele no blog, tirar a barra de cima e colocar .com.br, aproveitando o sistema de favicon do blog.

    Obrigado desde já.
    OBS: se tiver como me ensinar como colocar um sistema de comentários deste em meu site agradeço, se não tiver não tem problema. Obrigado de novo!

  39. José Perdigao

    Olá!

    Estou tendo uma dúvida:

    Tenho página que tem os textos longos e aparece uma barra lateral para rolar os mesmos mas não gosto.
    Quero eliminá-la mas não consigo. É possível me ajudar?

    Agradeço.

    jpaf/2011.

  40. me ajuda ae, na parte em que vc diz

    Primeiramente é necessário que a página a ser incluída dentro do Iframe esteja em algum lugar na internet

    mais como eu faço para a pagina tar na internet?
    eu nao entendo nadadisso

    me ajuda ae.

  41. Olá Celso, todo dia eu tenho que olhar vários sites de noticias da universiade pra ficar dentro do assunto. Mas perco muito tempo abrindo todos e as vezes me esqueço de algum. O que eu queria fazer era colocar em uma página só várias janelinhas que mostrassem apenas a parte que tem as notícias, não o site inteiro, soh o quadrado das notícias.
    Tentei usar o Iframe mas ai aparece a barra de rolagem, no caso seria uma janela só com as noticias do site da univesidade http://www.ufsm.br. Eu coloquei esse código no site netvibes.com que pode fazer isso, mas gostaria de uma opinião.
    Valeu

    • Gleisson,
      Você está fazendo isso da forma errada. Hoje em dia a maioria dos sites e blogs oferecem a visualização do conteúdo via Feed, o que facilita e muito neste caso.
      Com o Feed, você pode acompanhar somente o conteúdo recente que é publicado nos sites e blogs que você acompanha. Saiba mais sobre o Feed aqui.

      Abraço!

  42. eu usei o Feed pros sites que possuiam essa opção, mas esses sites que estou tentando colocar numa página só não possuem o Feed, ai que surje o meu problema
    eheheh
    obrigado pela atenção

    • Gleisson,
      Entendi. De qualquer forma, o que você pretende fazer com o Iframe não será possível, pois não tem como configurar a parte do site que será exibida no Iframe. Ele vai sempre começar de cima para baixo, da esquerda para a direita.

      Abraço!

  43. Celso, gostaria de saber se tem como eu criar um iframe em q eu possa colocar imagens ou outras coisas q nao seja colocar um site no iframe?

  44. Olá amigo, Realmente é muito útil a sua informação 😀

    Gostaria de saber se tem como fazer a seguinte coisa:

    Um exemplo.

    Faz de conta que deixar visível apenas os comentários desta sua página. isso tudo, claro, dentro do iframe.

    Obrigado e parabéns pelo trabalho;

  45. Gostaria de um comendo iframe que automatiza-se a Height: Altura do Iframe para a altura da página em questão.

  46. Ronaldo bastos jorge

    Galera tenho um site que usa banners do adsense e gostaria de saber como eu posso fazer para ocultar os banners da página inicial do blog?Gostaria que fosse visualizado o banner apenas quando o visitante abrisse o post completo.

    • Ronaldo,
      Desculpe mas eu não sei como fazer isso.

      Abraço!

    • Tudo Para Sites - Digo Cabral

      Ronaldo,
      Se os anuncios do Adsense estiverem, assim como aqui no Criar Sites, no inicio da postagem, o WordPress por padrão irá mostra-lo. Conforme o template que você utiliza poderá personaliza-lo, no campo expert / resumo. para isso insira o resumo ou descrição do artigo, que pode inclusive ser inserido um código html diferente do inicio do artigo. com outras imagens, anuncios ou da maneira que quiser. Depois de incluir o resumo, geralmente posicionado abaixo do editor do texto no painel do WordPress, insira a tag Read More
      Qualquer dúvida entre em contato pelo meu blog.
      Abraços,
      Digo Cabral

  47. Olá, tudo bem?

    Estava procurando por uma coisa parecida com iframe, mas descobri que não é exatamente isso que eu preciso.

    Eu queria que acima do meu menu houvesse um player de música, e que independente de qual menu a pessoa navegasse, o player continuasse lá tocando, initerrupto… mas acho q isso não é com iframe né?

    Saberia me responder como faço isso. Desde já agradeço.

    Abraço.

  48. Opa… Valeu pela dica Celso. Dei uma olhada, mas acho q no meu caso não vai funcionar. Vou explicar:

    Estou criando um site de podcasts. Estou utilizando o wordpress e criando meu tema do zero. Neste caso, eu gostaria que o player ficasse no topo do site quando a pessoa clicasse em “ouvir podcast”.

    Pelas explicações do tutorial do link que vc me passou sobre iframe, eu teria que colocar a index principal somente com o player do topo, e logo abaixo do player um iframe onde a pessoa navegaria no site (tema wordpress) somente dentro do iframe. Até aí tudo bem, teóricamente daria certo, masssssss… Acredito que não será possível, pois o wordpress precisa que os arquivos header.php, footer.php e index.php sejam linkados… e estes 3 arquivos, se não me engano, têm que ser chamados na página principal.

    Tipo, se eu digitar http://www.meusite.com.br, o wordpress vai achar o index.php, e logo em seguida ele vai obrigatóriamente procurar pelo header e pelo footer. Mas se eu utilizar o index.php para criar o player, daí ele não achará o index e o footer porque eles estarão dentro do iframe… Compliquei demais? Deu pra entender?…rsrs.

    Pra ser sincero não testei ainda, vou fazer isso agora, mas seguindo a lógica de funcionamento do wordpress eu acredito que não dará certo não.

    Bom, vc teria alguma outra solução para o meu caso?

    Agradeço a ajuda.

    Abraço.

    • Bruno,
      Neste caso você teria que mover o blog para uma pasta dentro do seu servidor. Seu blog seria acessado por algo como seusite.com/blog
      Outra opção seria você criar uma nova página em seu servidor tipo radio.php e adicionar o iframe a ela. Neste caso você teria que criar um link ou botão sugerindo para os visitantes que quisessem ouvir a rádio.

      Abraço!

  49. Então Celso. Eu estou tentando fazer como nesse site: http://jovemnerd.ig.com.br/categoria/nerdcast/

    Tipo. cliquei no botão “clique para ouvir” e o player aparecerá no topo, em seguida, navegue em qualquer um dos menus e o player continuará initerrupto.

    Do jeito que vc me sugeriu, de instalar o meu site numa pasta /blog, daria até certo, mas eu tenho intenção de manter o site no link principal do site, por questões de SEO e Indexação, e isso deve ter jeito porque esse site do nerdcast funciona dessa forma, sem precisar colocar o site numa subpasta (pelo menos parece).

    E agora Mr. M?

    Alguma idéia?

    Desde já agradeço. Abraço.

  50. Eu quero saber se há um jeito de posicionar o conteúdo do iframe.

    Por exemplo… como se pegasse o exemplo de iframe colocado aqui na página e que a imagem “criar sites” ficasse um pouco mais perto da borda do iframe.

  51. Eu gostaria de saber como colocar um iframe de publicidade no meu site eu uso o google site gratis, é que quando eu coloco o codigo html ja com o iframe completo, aparece apenas uma caixa em branco escrito include gadget(iframe). Agradeço desde já!

  52. Eu gostaria de saber se colocar páginas de terceiros em um iframe na minha página seria ilegal? exemplo: ter um blog e lá nele disponibilizar um iframe de um jogo que tenha em outro site, é ilegal isso? Att

    • Olá Nando,
      Não é ilegal desde que o autor permita que você faça isso ou que você não tente disfarçar o conteúdo de forma que ele realmente pareça com um conteúdo presente em seu site.

      Abraço!

  53. Ah então eu teria de pedir permissão né? o iframe tinha ficado parecido com o conteúdo do meu blog mesmo, o certo seria eu colocar a referencia lá como: esse conteúdo abaixo vem do site http:.., mesmo assim acredito que não era correto deixe prá la esse iframe já até removi ele de lá kkk

  54. Boa tarde, bom interessante a explicação. Bom tenho um site, mas nao quero que minhas páginas de navegação abram em outra aba, quero que elas abram dentro de um Iframe, ou seja, na página principal as página de navegação devem abri dentro desse Iframe, qual o código para que eu consiga configurar certo?

  55. Bruno Bezerra

    Celso, gostei do post! Tenho uma dúvida, os iframes também servem em sites feitos com HTML5?

    []’s

  56. Muito bom seu conteúdo! Consegui melhor compreender os infames, ops! inframes, hehehe…

    Valeu Celso Lemes,

    Abraço.

  57. Estou querendo abrir a pagina de venda do produtor dentro do meu blog, como faço isto.
    Quando alguém abrir este pagina dentro do meu blog, ele gera cookies de afiliados no navegador do usuario.

    • Olá Cristiano,
      Seu blog é Blogger ou WordPress?
      No Blogger teria que utilizar um botão de venda de um serviço como o Pagseguro por exemplo. Já no WordPress existem diversos plugins que permitem transformar o blog em uma loja virtual.

      Abraço!

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *