<embed> vs. <object>


164

Qual è il tag giusto / migliore da utilizzare nel mio file HTML quando voglio visualizzare il visualizzatore Adobe PDF?

In questo momento sto usando il codice qui sotto, ma ci sono strani effetti collaterali (ad esempio sembra rubare il focus iniziale che ho impostato su un'altra <input>casella di testo; non sembra giocare molto bene con la classe Resigeable di jQueryUI; eccetera.)

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

Potrei anche fare la stessa cosa con il <object>tag? Ci sono vantaggi / svantaggi nell'usare un tag rispetto all'altro?


21
E ora con <embed> in HTML5? Qual è il modo migliore?
VinnyG,

@VinnyG <embed>è ora ufficialmente un tag standard con HTML5, ma dovresti anticipare almeno alcuni problemi di compatibilità con le versioni precedenti del browser.
b1nary.atr0phy

Risposte:


169

OBJECT vs. EMBED: perché non usare sempre embed?

Concludendo: OBJECT è buono, EMBED è vecchio. Oltre ai tag PARAM di IE, qualsiasi contenuto tra i tag OBJECT verrà visualizzato se il browser non supporta il plug-in di riferimento OBJECT e, a quanto pare, il contenuto viene richiesto http indipendentemente dal fatto che venga eseguito il rendering o meno.

objectè il tag standard corrente per incorporare qualcosa in una pagina. embedè stato incluso da Netscape (insieme img) prima che qualcosa del genere objectfosse nella mente di W3C .

Ecco come includere un PDF conobject :

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

Se si ha realmente bisogno la linea PDF per mostrare in quasi tutti i browser, come i vecchi browser capiscono embed, ma non object, avrete bisogno di fare questo:

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

Questa versione non convalida .


47

7
Anche se <embed>fa parte dello standard HTML5, mi sembra che <object>sia la scelta migliore a causa della compatibilità con i browser più vecchi e della possibilità di visualizzare contenuti alternativi. Pensieri?
Raffaello,

4
@raphaelcm Mi permetta di interpretare l'avvocato del diavolo. Se mantenere la compatibilità con browser obsoleti fosse così importante, l'HTML non si evolverebbe mai. Ciò che è importante qui è la quota di mercato , in particolare per quanto riguarda le versioni del browser.
b1nary.atr0phy

7
Perché questo è accettato? Pensavo che <embed> fosse il tag standard HTML5.
fabspro,

2
Penserei che <embed> sarebbe la scelta migliore per il futuro. È nello standard HTML5 mentre Object aveva molte delle sue caratteristiche (attributi) deprecate per separare la sua funzionalità dal tag embed. w3schools.com/tags/tag_object.asp Mi sembra che il tag oggetto sia quasi un tag "coltellino svizzero" mentre embed è appositamente creato per incorporare contenuti in una pagina.
cmaynard,

5

Alcune altre opzioni:

<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>

3

Puoi anche usare il metodo iframe, anche se questo non è compatibile con più browser (ad es. Non funziona in Chrome o Android e probabilmente altri -> richiede invece di scaricare). Funziona con dataURL e URL normali, non sei sicuro che gli altri esempi funzionino con dataURLS (per favore fammi sapere se gli altri esempi funzionano con dataURLS?)

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

3

Probabilmente la migliore soluzione cross-browser per la visualizzazione di pdf su pagine Web è utilizzare il codice del progetto Mozilla PDF.js, può essere eseguito come servizio node.js e utilizzato come segue

<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>

Un tutorial su come usare pdf.js è disponibile in questo articolo del blog di ejectamenta


1

Incorpora non è un tag standard, sebbene lo sia l'oggetto. Ecco un articolo che sembra che ti aiuterà, poiché sembra che la situazione non sia così semplice. È incluso un esempio per PDF.


12
L'embed sembra essere abbastanza standard per me, almeno in HTML5.
Kapa,

6
@ bažmegakapa Ora è certamente standard con HTML5, ma quell'articolo a cui si riferisce è stato scritto nel 2008 e la sua risposta è del 2009, precedente a HTML5.
b1nary.atr0phy

2
@ b1naryatr0phy Ecco perché ho aggiunto il commento. A mio avviso, dovrebbe aggiornare o rimuovere la risposta, poiché non è più pertinente, quindi non aiuterà i visitatori futuri.
kapa,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.