<embed> vs. <object>

164

Qual é a melhor / melhor tag a ser usada no meu arquivo HTML quando quero exibir o visualizador do Adobe PDF?

No momento, estou usando o código abaixo, mas existem efeitos colaterais estranhos (por exemplo, parece roubar o foco inicial que defini para outra <input>caixa de texto; não parece funcionar muito bem com a classe Resolvível do jQueryUI; etc.)

<embed src="abc.pdf" type="application/pdf" />

Eu poderia fazer a mesma coisa com a <object>tag? Existem vantagens / desvantagens em usar uma tag versus a outra?

JayhawksFan93
fonte
21
E agora com <embed> em HTML5? Qual é a melhor maneira?
VinnyG
O @VinnyG <embed>agora é oficialmente uma tag padrão com HTML5, mas você deve antecipar pelo menos alguns problemas de compatibilidade com versões mais antigas do navegador.
precisa saber é o seguinte

Respostas:

169

OBJECT vs. EMBED - por que nem sempre usar a incorporação?

Conclusão: OBJETO é bom, EMBED é antigo. Além das tags PARAM do IE, qualquer conteúdo entre as tags OBJECT será renderizado se o navegador não suportar o plug-in referido do OBJECT e, aparentemente, o conteúdo será solicitado por HTTP independentemente de ser renderizado ou não.

objecté a tag padrão atual para incorporar algo em uma página. embedfoi incluído pelo Netscape (junto img) antes que algo assim objectestivesse na mente do w3c .

É assim que você inclui um PDF comobject :

<object data="data/test.pdf" type="application/pdf" width="300" height="200">
  alt : <a href="data/test.pdf">test.pdf</a>
</object>

Se você realmente precisa que o PDF embutido seja exibido em quase todos os navegadores, como os navegadores mais antigos entendem, embedmas não object, precisará fazer o seguinte:

<object data="abc.pdf" type="application/pdf">
    <embed src="abc.pdf" type="application/pdf" />
</object>

Esta versão não valida .

Esteban Küber
fonte
47
<embed> é realmente parte do HTML5 dev.w3.org/html5/spec/Overview.html#the-embed-element
de Drew LeSueur
7
Embora faça <embed>parte do padrão HTML5, parece-me que <object>é a melhor escolha devido à compatibilidade com navegadores mais antigos e à capacidade de exibir conteúdo alternativo. Pensamentos?
11756 Raphael
4
@raphaelcm Permitam-me que seja o advogado do diabo. Se a manutenção da compatibilidade com navegadores desatualizados era tão importante, o HTML nunca evoluiria. O importante aqui é a participação de mercado , especificamente em relação às versões do navegador.
precisa saber é o seguinte
7
Por que isso é aceito? Eu pensei que <embed> fosse a tag padrão do HTML5.
Fabspro #
2
Eu acho que <embed> seria a melhor escolha daqui para frente. Ele está no padrão HTML5, enquanto o Object teve muitos de seus recursos (atributos) preteridos para separar sua funcionalidade da tag incorporar. w3schools.com/tags/tag_object.asp Parece-me que a tag de objeto é quase uma tag de 'canivete suíço' enquanto a incorporação é criada especificamente para incorporar conteúdo em uma página.
precisa saber é o seguinte
5

Algumas outras opções:

<object type="application/pdf" data="filename.pdf" width="100%" height="100%">
</object>

<object type="application/pdf" data="#request.localhost#_includes/filename.pdf" 
        width="100%" height="100%">
  <param name="src" value="#request.localhost#_includes/filename.pdf">
</object>
aguz
fonte
3

Você também pode usar o método iframe, embora este não seja compatível com vários navegadores (por exemplo, não funcione no chromium ou android e provavelmente em outros -> solicite o download). Funciona com dataURLs e URLs normais, não tenho certeza se os outros exemplos funcionam com dataURLS (por favor, deixe-me saber se os outros exemplos funcionam com dataURLS?)

 <iframe class="page-icon preview-pane" frameborder="0" height="352" width="396" src="data:application/pdf;base64, ..DATAURLHERE!... "></iframe>
ejectamenta
fonte
3

Provavelmente, a melhor solução entre navegadores para exibição em pdf nas páginas da Web é usar o código do projeto Mozilla PDF.js, ele pode ser executado como um serviço node.js. e usado da seguinte maneira

<iframe style="width:100%;height:500px" src="http://www.mysite.co.uk/libs/pdfjs/web/viewer.html?file="http://www.mysite.co.uk/mypdf.pdf"></iframe>

Um tutorial sobre como usar o pdf.js pode ser encontrado neste artigo do ejectamenta blog

ejectamenta
fonte
1

Incorporar não é uma tag padrão, embora o objeto seja. Aqui está um artigo que parece que o ajudará, pois parece que a situação não é tão simples. Um exemplo para PDF está incluído.

aehlke
fonte
12
A incorporação parece bastante padrão para mim - pelo menos em HTML5.
kapa 07/07
6
@ bažmegakapa Certamente agora é padrão no HTML5, mas o artigo a que ele se refere foi escrito em 2008 e sua resposta é de 2009, que antecede o HTML5.
precisa saber é o seguinte
2
@ b1naryatr0phy Foi por isso que adicionei o comentário. Ele deve atualizar ou remover a resposta na minha opinião, pois ela não é mais relevante e, portanto, não ajudará futuros visitantes.
Kapa