Inserindo página HTML em uma página HTML
Publicado em: 2006-12-21 — 19,795 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="pagina-a-incluir.html">
<p>conteúdo alternativo para tecnologias que não suportam OBJECT</p>
</object>
<![endif]–>
<p>conteúdo alternativo para tecnologias que não suportam OBJECT</p>
<!–[if !IE]> <–>
<object type=”text/html” data=”pagina-a-incluir.html”>
</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.
(1 votos, média: 1 / 5)
Loading ...----------------x-x-x--------------- fim da matéria ---------------x-x-x---------------
Esta matéria foi publicada em: 2006-12-21 (Thursday). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para http://www.maujor.com/blog/2006/12/21/inserindo-pagina-html/trackback no seu site.
Muito bom maujor … sempre passo aqui pra ler seus artigos e a cada dia dá mais vontande e explorar o mundo standarts ..
valeu
Simplesmente incrível.
Nunca imaginei que a tag object poderia servir para isso.
Ainda estou engatinhando nas standards. Carambas.
Show de bola… Também não imaginava “substituir” o iframe desta forma.
Obrigado por mais esta ajuda
Sempre procurei uma forma de fazer isso mas nunca encontrei, obrigado pela dica. Abraços!!!
[…] 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/ /**/ […]
Alguém mais não teve sucesso na utilização desse “método” pro IE?
Obrigado.
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
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" 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.
@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.
[…] link relacionado : http://www.maujor.com/blog/2006/12/21/inserindo-pagina-html/ […]
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.
em 1° lugar, muito obrigado por compartilhar essas informações!
Agora diz um negocio, isso funciona + ou - como include em php?
Grande abraço
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
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
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!
sacripantas
isso resolve meus problemas com iframe, que na minha opinião eram deselegantes.
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…
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…
Tem como colocar um menu drop-down dentro do object?
No w3c fala que é bom utilizar a tag object pois oferece mais opções de estilizações, acessibilidade etc… Mas como eu faço para colocar a imagem png dentro da tag object e esta imagem sirva como uma ligação? Eu sei colocar a imagem na tag, mas o que eu quero ao mesmo tempo, é que ela sirva como uma ligação para um outro documento no site.
O normal eu usaria:
Mas e para a tag object ?
Seria assim ?
Obrigada!
Gostei. Obrigado.
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?
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.
quero colocar mais uma linha iframe na minha pagina já tenho 2 o que devo fazer para por 3
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.
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…
broder salvou a minha vida
Então,
posso adicionar css com esse método?
Vi um comentário sobre o include, mas acho que não é a mesma coisa…
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!
Fantástico, pena que ainda não funciona no google chrome
