Logo do siteSilhueta da face do Maujor seguida do texto Maujor o dinossauro das CSS

Menu hamburger Três barras horizontais na cor laranja destinadas a ser clicada para abrir o menu menu do site

Inserindo página HTML em uma página HTML

Publicado em: 2006-12-21 — 258.923 visualizacoes

…ou, como simular iframe em documentos XHTML Strict.

Esta matéria é uma tradução de: Insert HTML page into another HTML page de autoria de Aleksandar Vacic

Uma noite destas eu precisei adicionar "ads" do kayak.com na minha página related to traveling. Os "ads" que eu usei são um conjunto de pequenos trechos de código oferecendo funcionalidades que permitem fazer buscas diretamente nos bancos de dados da kayak.com. Uma coisa muito bem concebida.

Lamentavelmente os códigos dos "ads" foram escritos à moda ultrapassada priorizando a renderização em modo kirks, e pior ainda – escritos com uso de tabelas aninhadas e "tag soup" diretamente dentro do documento – uma solução diferente da adotada pelo Google AdSense. Mas, quando as regras de estilo do meu site foram aplicadas ao código dos "ads", aconteceu o desastre.
Felizmente, os "ads" abrem em uma nova janela, então eu simplesmente criei um iframe para renderizar os "ads" na página. Grande solução…não fosse o detalhe que minhas páginas são codificadas em XHTML 1.0 Strict, que não admite iframe. Que beleza.

O caminho correto para se incluir uma página HTML dentro de outra página é através do uso do elemento object. Este é o elemento destinado a inserir objetos externos em uma página bem estruturada. O modo padrão de codificar o elemento object é pelo uso do MIME type e da URL do objeto a inserir. Naturalmente, isto não funciona no IE6 (nem no IE7) e eu tive que sair a procura do valor do infame clsid para text/html.

Depois de tentar por 10 minutos eu não consegui encontrar o valor e então resolvi abrir o RegEdit, fui ao menu de clsid e lá encontrei o que estava procurando. Aí ficou fácil:

<!--[if IE]>
<object classid="clsid:25336920-03F9-11CF-8FD0-00AA00686F13" data="http://www.maujor.com/">
<p>conteúdo alternativo para tecnologias que não suportam OBJECT</p>
</object>
<![endif]-->
<!--[if !IE]> <-->
<object type="text/html" data="http://www.maujor.com/">
<p>conteúdo alternativo para tecnologias que não suportam OBJECT</p>
</object>
<!--> <![endif]-->

Isto funcionou beleza, mas nos IE (6 e 7) apareceu uma borda horrível e barra de rolagem, mesmo sendo a página incluida de dimensões menores que os atributos width e height definidos para o elemento object. Para solucionar o problema eu especifiquei a seguinte regra de estilo na página a incluir:

...
<body style="border:0;overflow:visible">
....

Com esta técnica, você integra de forma elegante um documento .html (ou .asp ou .php ou qualquer outro) em uma página web.

Ver uma página que emprega esta técnica testada nos IE6+, FFox, Safari, Chrome e Opera. Examine o código fonte da página.

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Visite o site dos livros.

Esta matéria foi publicada em: 2006-12-21 (quinta-feira). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para https://www.maujor.com/blog/2006/12/21/inserindo-pagina-html/trackback no seu site.

60 comentários na matéria: “Inserindo página HTML em uma página HTML”

  1. Anderson RodriguesNo Gravatar disse:

    Uau, fantástico, conhecimento é rei…
    Não sabia que o tag object faria isso…

    Parabéns !!!

  2. Eloy TuffiNo Gravatar disse:

    Muito esclarecedor o post! Vejam mais sobre tecnologia

  3. ANTONIONo Gravatar disse:

    O ADSENSE PROÍBE USAR O SITE COM CONTEÚDO DE ANÚNCIOS DENTRO DE UM INFRAME, E NESSE CASO O GOOGLE TAMBÉM PROÍBE USAR SITE HTML DENTRO DE OUTRO SITE HTML?

    SE USAR MEU SITE DENTRO DENTRO DESSE MÉTODO É IGUAL USAR UM IFRAME?

  4. CamilaNo Gravatar disse:

    Otimo tutorial ja aplicamos varias dicas nos nossos sites de Lembrancinhas de Aniversario Personalizadas http://www.babyemotion.com.br e de Aluguel de Moveis e Decoração Provençal Campinas http://www.decoracaoprovencalcampinas.com.br

    Otimo site continue sempre assim

  5. MarcoNo Gravatar disse:

    VALEU!!!! o meu funcionou com Iframe no iE 7, mas tive de usar o

    nas páginas que eu inclui!

    Muito Obrigado!

  6. RafaelaNo Gravatar disse:

    Excelente dica, ajudou muito.

    Mas não consigo tirar a barra de rolagem. Quer dizer ela aparece apenas no Chrome .. em outras navegadores não. Alguém sabe o que fazer ??

  7. CamilaNo Gravatar disse:

    Olá
    alguém sabe se tem como tornar esta tag ajustável ao conteúdo, pois queria retirar as barras de rolagem dele, porém os conteúdos varião de tamanho 🙁

  8. CamilaNo Gravatar disse:

    Muito obrigada! Me deu uma luz agora, não sabia que podia utilizar a tag desta forma, valeu mesmo, muito sucesso para você e que continue compartilhando seu conhecimento com a gente. Parabéns!

  9. Wesley JunioNo Gravatar disse:

    Kara!!! muito obrigado. Seu codigo funcionou aqui perfeitamente.

  10. PattersonNo Gravatar disse:

    Cara no firefox funcionou mas no Chato do IE9 Apareceu a mensagem: onteúdo alternativo para tecnologias que não suportam OBJECT

    Por que????Gostaria de saber 😉

  11. Daniel EmilianoNo Gravatar disse:

    Fantástico !!!
    Nunca imaginei que o object podia fazer isso.
    Essa matéria deveria ser mais divulgada por aí.

  12. DeilsonNo Gravatar disse:

    gostei de sua ideia
    quero abrair varia pagina usando link dentro da div, como faço;

    agradece desde já Deilson!

  13. MarlonNo Gravatar disse:

    # programadorNo Gravatar disse: 2010 – 02 – 19 11:16 GMT
    Existe uma maneira mais facil.
    Transformar a pagina principal em .php e usar a tag
    Como faço isso programador?

    marlonfq@gmail.com

  14. Tuxtilt » Coloque o Visualizador do Google Docs no seu site disse:

    […] Simplesmente é isso. Bueno, no caso de navegadores chumbregas que não estão de acordos com os padrões, tu pode utilizar iframes, ou senão fazer um hack que nem o ensinado pelo Maujor: […]

  15. diegoNo Gravatar disse:

    Gostei do artigo, muito bom.
    Mas na minha opnião a tag não irá substituir o
    até que alguém me prove o contrário!
    Em uma página eu posso inserir na tag A o atributo target, e através dele posso indicar que o link erá abrir no iframe,

    Como ou o que fazer para que a URL dos meus links abra dentro da tag sem carregar a página inteira (abrir apenas dentro da tag object)???

    SErá que é possível?!!

  16. Adriano SouzaNo Gravatar disse:

    Olá Maujor!!
    Sou asssíduo leitor de seus tutoriais, adquiri o livro CSS e XHTML E JQUERY.

    Estou no segundo ano de Sistemas de Informação. E após a Faculdade, quero me especializar em WEB.

    NO TUTORIAL “Inserindo Página HTML em uma PÁGINA HTML”, me veio a seguinte duvida:

    Tenho um Layout em tablelles de Três colunas, na 1ª coluna tenho os links, no meio tenho o Conteúdo principal, pois bem.

    Quero que, ao acessar o link A tag OBJECT (que é esta na div conteudo) carregue o link.

  17. angelo rogerio rubinNo Gravatar disse:

    Parabéns por mais um excelente artigo MAUJOR !
    Funciona perfeitamente testado e aprovado.

  18. MaicomNo Gravatar disse:

    Será que tem alguém ai que saberia onde entra essa segunda parte que ele disse que ficaria fácil? Pra mim tá dificil adivinhar onde insiro esse dentro do codigo.

  19. Jansle PauloNo Gravatar disse:

    Muito bom never more iframe 😉

  20. FernandoNo Gravatar disse:

    Funcionou direitinho, obrigado pela dica! Pena não funcionar para o Google Maps.

    A única solução que encontrei até agora foi substituir o object por uma imagem do mapa.

    .

  21. MaujorNo Gravatar disse:

    Acrescentei uma página demonstrando que funciona cross-browser. Examine o código fonte da página.

  22. RangelNo Gravatar disse:

    Realemnte nao funciona no FF….
    abss.

  23. cristiano coqueiroNo Gravatar disse:

    Muito boa mesmo a solução, iframes de uma aplicação minha não estavam aparecendo no chrome, mas agora com a tag object o meu problema foi resolvido…

  24. programadorNo Gravatar disse:

    Existe uma maneira mais facil.
    Transformar a pagina principal em .php e usar a tag

  25. SisiNo Gravatar disse:

    No mozila firefox 3.5.2 não funcinou =(

  26. VitorNo Gravatar disse:

    Olá pessoal, estou com vairos erro quando fazer isso!!!

    Mais o problema é que ele não aparece no firefox e ainda naum consegui eliminar a bendita barra de rolagem…

    Alguem poderia me mandar ou postar um html de exemplo para que eu possa ver??

    Obrigado!!!

  27. Antonio MottaNo Gravatar disse:

    Foi muito útil a informação, foi mais facil do que eu pensei, e me ajudou muito. Grato

  28. JulianoNo Gravatar disse:

    Olá, tudo bem?
    Legal, este artigo, mas isto não soa meio que como uma gambiarra?
    Digo, para você validar o seu documento html, utiliza a tag object para inserir outra página dentro de uma página?

  29. SergioNo Gravatar disse:

    Olá pessoal, continuei insistindo, estudei o código várias vezes e consegui inserir a formatação do body no script conforme indicação do Maujor e ficou excelente !!!
    Obrigado…

  30. SergioNo Gravatar disse:

    Olá pessoal, estou tentando inserir um slideshow em js em uma div e a tag object fez o trabalho direitinho, mas não consigo retirar as malditas barras de rolagem, tentei usar a alternativa indicada pelo maujor () mas o script não aceita alterações. Alguem conhece alguma alternativa por favor ?
    Excelente matéria Maujor !

  31. Rodrigo PessôaNo Gravatar disse:

    Ótima solução esta eim.
    Não precisei usar o classid=”clsid:25336920-03F9-11CF-8FD0-00AA00686F13″ para abrir no IE.

    Um problema:
    Tentei usar o object como iframe. Coloquei um nome nele para que as páginas abram nele, ficou assim
    <object type=”text/html” data=”index.html” width=”700″ height=”600″ class=”janela” name=”alvo”>

    No Firefox funcionou, mas no IE não. Ele não reconhece como um target e acaba abrindo em uma nova página.

    É possível usar o object como iframe e mandar os links abrirem dentro dele??

  32. Fábio PaivaNo Gravatar disse:

    Fantástico, pena que ainda não funciona no google chrome
    🙁

  33. drfrancaNo Gravatar disse:

    Pessoal, to precisando de uma ajuda, não consigo fazer funcionar esse método no ie7, estou incluindo uma página .aspx dentro de uma página PHP, mas em testes usando iframe, no IE um script javascript não funciona bem, testei usando o objecte funcionou no IE6, acredito que seja a minha solução, mas aí tem o problema do IE7…

    Abraços galera!

  34. RosanaNo Gravatar disse:

    Então,

    posso adicionar css com esse método?

    Vi um comentário sobre o include, mas acho que não é a mesma coisa…

  35. rafaNo Gravatar disse:

    broder salvou a minha vida

  36. ThiagoNo Gravatar disse:

    Estou com o mesmo problema do amigão aí de cima. Na verdade já até consegui eliminar a barra de rolagem. Mas a maldita borda não sai nem por decreto…

  37. paparazzyNo Gravatar disse:

    Olá. Como nao sou programador experiente estou a fazer o site da minha empresa utilizando o dreamweaver e até agora tenho utilizado iframes nas quais consigo eliminar os scrolls horz e verticais, mas apos ter lido este metodo de utilizar o “object” em vez de “iframe” tentei faze-lo no site e consegui:) Muito Bom!!! Mas tenho um problema, como sou designer grafico ligo muito ao aspecto visual e utilizo css em tudo para conseguir que fique tudo “limpinho” e no sitio certo… Bem a questão é esta: utilizei o “object” para chamar um html externo e apliquei-lhe um css para posicionar o “object” onde quero, mas ja tentei de tudo e nao consigo eliminar a border e as scrolls (neste caso quero eliminar a horizontal apenas). Será que me pode ajudar??? É bastante importante!!! Obrigado e Parabéns pelas excelentes dicas.

  38. yujiNo Gravatar disse:

    quero colocar mais uma linha iframe na minha pagina já tenho 2 o que devo fazer para por 3

  39. JulianoNo Gravatar disse:

    Uma questão: É possível colocar na tag “object ” o type=”text/xhtml” ao invés de type=”text/html” ???

    Editado pelo Maujor.
    Motivo: Postado com erro e posteriormente corrigido pelo autor.

  40. RicardoNo Gravatar disse:

    Uma perguntinha… (me desculpem a ignorância caso eu esteja errado): mas, qual a diferença de se utilizar “object” de “iframe”, seria somente pelo W3C? Outra: de o registro do windows do cliente estiver danificado nesta parte do “object” não teria problema no uso deste recurso e a página acabar não carregando? E então, “iframe” não seria mais seguro? Alguém já pôde verificar isso?

  41. Rodrigo Odon LimaNo Gravatar disse:

    Gostei. Obrigado.

  42. George MattosNo Gravatar disse:

    Tem como colocar um menu drop-down dentro do object?

  43. JoaresNo Gravatar disse:

    Aqui… ele gerou uma barra de rolagem… será q num tem outra alternativa não?

    Tipo… Eu determino a height… mas… se eu add mais conteúdo à página chamada… eu terei q mudar a height lá na tag object sempre?

    Isso seria inviável…

  44. tglNo Gravatar disse:

    Gostei do código, inclusive o mesmo texto está no HTML Staff, gostaria de saber quem foi o original? Bom, mas o assunto é o código: aprovado. Agora consegui colocar meu blog dentro do meu sítio. Pena que ficam duas barras de rolagem…

  45. SanchesNo Gravatar disse:

    sacripantas
    isso resolve meus problemas com iframe, que na minha opinião eram deselegantes.

  46. Tania AvanziNo Gravatar disse:

    Utilizei o script e funcionou legal nos testes, só que minha intenção era usá-lo para carregar os botões do menu do site e aí não deu certo, porque os links são carregados dentro da janela do object. A solução seria abrir os links sempre em uma nova janela, mas aí a navegação fica inviável… uma pena!

  47. RafagdNo Gravatar disse:

    Acho que uma solução melhor seria:

    [object type=”text/html” data=”pagina-a-incluir.html”]
    [object classid=”clsid:25336920-03F9-11CF-8FD0-00AA00686F13″ data=”pagina-a-incluir.html”]
    [p]conteúdo alternativo para tecnologias que não suportam OBJECT[/p]
    [/object]
    [/object]

    Mas parece que necessitaria de algumas correções no CSS

  48. GustavoNo Gravatar disse:

    Muito boa a materia, só que quando adicione o codigo na minha pagina aparece a seguinte mensagem:

    !–[if IE]>

    conteúdo alternativo para tecnologias que não suportam OBJECT

    conteúdo alternativo para tecnologias que não suportam OBJECT

    tanto no ie6 e o mozilla2.0

    o que pode ser?

    Abraço

  49. Leonardo L ProcópioNo Gravatar disse:

    em 1° lugar, muito obrigado por compartilhar essas informações!
    Agora diz um negocio, isso funciona + ou – como include em php?
    Grande abraço

  50. DBauermannNo Gravatar disse:

    Maujor,

    Minha dúvida é: tenho como alterar o valor de “data” deste “object”?

    Pergunto, pois estou tentando criar uma solução onde possa fazer novas cargas de páginas diferentes nestes frames.

    Encontrei uma solução em http://www.howtocreate.co.uk/tutorials/jsexamples/rewritediv.html, no entanto, ela usa “iFrame”… Pelo que andei lendo aqui, o elemento “iFrame” está em desuso. Existe alguma alternativa para a solução que descrevi acima?

    Atenciosamente.

  51. iframe versus object at Farley Rangel disse:

    […] link relacionado : http://www.maujor.com/blog/2006/12/21/inserindo-pagina-html/ […]

  52. MaujorNo Gravatar disse:

    @gmalta
    Testei o código que você apontou e realmente é válido e funcionou nos IE5, IE5.5, IE6, FFox2.0, Opera7.54 e 9, NN7.1 e Mozilla1.4.
    Meu comentário:
    O explicado na matéria serve o código para os IE via comentários condicionais seguindo a mesma filosofia de projeto atualmente consagrada para servir CSS aos IE, isolando os ‘hacks’ para o navegador não complacente.
    O código que você apontou faz o mesmo efeito com economia de alguns bytes extras misturando código standard com código ‘ruim’.
    Resumo: Usar um ou outro é uma decisão do desenvolvedor face a filosofia de projeto adotada.

  53. gmaltaNo Gravatar disse:

    Maujor e porque não usar assim, que funciona em IE e não IE , e tb passa no w3c validator

    <object classid="clsid:25336920-03F9-11CF-8FD0-00AA00686F13" type="text/html" data="http://sapo.pt&quot; width="300" height="300">
    </object>
    ——————————————————————–
    Editado pelo Maujor: O WP não inseriu o código enviado pelo @gmalta em um primeiro comentário e ele enviou em um segundo.
    Editei e coloquei o código.

  54. MaxNo Gravatar disse:

    Gostei bastante da sua idéia, vai me ser bastante útil. Mas tive de fazer algumas adaptações para funcionar legal aqui, juntei sua idéia com outra que vi (pena que não lembro onde) para adicionar flash em xhtml (eu utilizo 1.1)

    [object type=’text/html’ data=’pagina-a-incluir.html’ width=’200′ height=’200′]
    [p]conteúdo alternativo para tecnologias que não suportam OBJECT[/p]
    [/object]

    aff, tá difícil adicionar tag aqui viu

  55. João Paulo FechineNo Gravatar disse:

    Alguém mais não teve sucesso na utilização desse “método” pro IE?
    Obrigado.

  56. Insert HTML page into another HTML page | published @ aplus moments disse:

    […] to: Brazilian-Portuguese (by Mauricio Samy Silva). Posted 1 month agopermanent linktrackback URL: http://www.aplus.co.yu/web-dev/insert-html-page-into-another-html-page/trackback/ /**/ […]

  57. Pedro RogérioNo Gravatar disse:

    Sempre procurei uma forma de fazer isso mas nunca encontrei, obrigado pela dica. Abraços!!!

  58. Carlos EduardoNo Gravatar disse:

    Show de bola… Também não imaginava “substituir” o iframe desta forma.

    Obrigado por mais esta ajuda 🙂

  59. MicoxNo Gravatar disse:

    Simplesmente incrível.
    Nunca imaginei que a tag object poderia servir para isso.
    Ainda estou engatinhando nas standards. Carambas.

  60. chicosilvaNo Gravatar disse:

    Muito bom maujor … sempre passo aqui pra ler seus artigos e a cada dia dá mais vontande e explorar o mundo standarts ..

    valeu

Comentário:





Teclar "Enter" cria um novo parágrafo. Teclar "Shift + Enter" causa uma quebra de linha.

Subscribe without commenting

topo