<embed> vs. <object>

164

Tag mana yang tepat / terbaik untuk digunakan dalam file HTML saya ketika saya ingin menampilkan penampil Adobe PDF?

Saat ini saya menggunakan kode di bawah ini, tetapi ada efek samping yang aneh (misalnya tampaknya mencuri fokus awal yang telah saya atur ke <input>kotak teks lain ; tampaknya tidak bermain dengan baik dengan kelas jQueryUI Resizeable; dll.)

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

Bisakah saya melakukan hal yang sama dengan <object>tag? Apakah ada keuntungan / kerugian menggunakan satu tag vs. lainnya?

html pdf embed-tag JayhawksFan93
sumber
21
Dan sekarang dengan <embed> di HTML5? Apakah cara terbaiknya?
VinnyG
@VinnyG <embed>sekarang secara resmi merupakan tag standar dengan HTML5, tetapi Anda harus mengantisipasi setidaknya beberapa masalah kompatibilitas dengan versi browser yang lebih lama.
b1nary.atr0phy

Jawaban:

169

OBJECT vs. EMBED - mengapa tidak selalu menggunakan embed?

Intinya: OBJECT Baik, EMBED Tua. Selain tag PARAM IE, konten apa pun di antara tag OBJECT akan diberikan jika browser tidak mendukung plugin yang dirujuk OBJECT, dan tampaknya, konten tersebut meminta http, terlepas dari apakah itu di-render atau tidak.

objectadalah tag standar saat ini untuk menyematkan sesuatu pada halaman. embeddimasukkan oleh Netscape (sepanjang img) sebelum hal-hal seperti objectada di pikiran w3c .

Ini adalah bagaimana Anda memasukkan PDF denganobject :

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

Jika Anda benar-benar membutuhkan PDF sebaris untuk ditampilkan di hampir setiap peramban, karena peramban yang lebih tua mengerti embedtetapi tidak object, Anda harus melakukan ini:

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

Versi ini tidak valid .

Esteban Küber
sumber
47
<embed> sebenarnya adalah bagian dari HTML5 dev.w3.org/html5/spec/Overview.html#the-embed-element
Drew LeSueur
7
Meskipun <embed>merupakan bagian dari standar HTML5, menurut saya itu <object>adalah pilihan yang lebih baik karena kompatibilitas dengan browser lama dan kemampuan untuk menampilkan konten alternatif. Pikiran?
Raphael
4
@raphaelcm Izinkan saya berperan sebagai advokat iblis. Jika menjaga kompatibilitas dengan browser yang sudah ketinggalan zaman itu penting, HTML tidak akan pernah berevolusi. Yang penting di sini adalah pangsa pasar , khususnya mengenai versi peramban.
b1nary.atr0phy
7
Mengapa ini diterima? Saya pikir <embed> adalah tag standar HTML5.
fabspro
2
Saya akan berpikir <embed> akan menjadi pilihan yang lebih baik ke depan. Itu dalam standar HTML5 sementara Object memiliki banyak fitur (atribut) yang sudah usang untuk memisahkan fungsionalitasnya dari tag embed. w3schools.com/tags/tag_object.asp Tampaknya bagi saya bahwa tag objek hampir merupakan tag 'pisau tentara Swiss' sementara embed adalah tujuan yang dibuat untuk menyematkan konten ke dalam halaman.
cmaynard
5

Beberapa opsi lain:

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

Anda juga dapat menggunakan metode iframe, meskipun ini tidak kompatibel lintas browser (mis. Tidak bekerja di kromium atau android dan mungkin yang lain -> alih-alih meminta untuk mengunduh). Ini berfungsi dengan dataURL dan URL normal, tidak yakin apakah contoh lain berfungsi dengan dataURLS (tolong beri tahu saya jika contoh lain berfungsi dengan dataURLS?)

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

Mungkin solusi lintas browser terbaik untuk tampilan pdf pada halaman web adalah dengan menggunakan kode proyek Mozilla PDF, itu dapat dijalankan sebagai layanan node.js dan digunakan sebagai berikut

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

Tutorial tentang cara menggunakan pdf.js dapat ditemukan di artikel blog ejectamenta ini

ejectamenta
sumber
1

Sematan bukan tag standar, meskipun objeknya. Inilah artikel yang sepertinya akan membantu Anda, karena situasinya tampaknya tidak begitu sederhana. Contoh untuk PDF disertakan.

aehlke
sumber
12
Embed tampaknya cukup standar bagi saya - setidaknya dalam HTML5.
kapa
6
@ bažmegakapa Sudah pasti standar sekarang dengan HTML5, tetapi artikel yang dia maksudkan ditulis kembali pada 2008 dan jawabannya adalah dari 2009, yang mendahului HTML5.
b1nary.atr0phy
2
@ b1naryatr0phy Itu sebabnya saya menambahkan komentar. Dia harus memperbarui atau menghapus jawaban dalam pandangan saya, karena tidak relevan lagi sehingga tidak akan membantu pengunjung masa depan.
kapa