perbedaan antara elemen iframe, embed dan objek

180

HTML5 mendefinisikan beberapa elemen konten tertanam, yang, dari pandangan mata burung, tampaknya sangat mirip dengan titik yang sebagian besar identik.

Apa perbedaan yang sebenarnya antara iframe, embeddan object?

Jika saya ingin menyematkan file HTML dari situs pihak ketiga, elemen mana yang bisa saya gunakan, dan bagaimana perbedaannya?

html iframe cnst
sumber
mereka tidak benar-benar terlihat sama sekali. situs pihak ketiga akan menjadi iframe.
Kai Qing
embed vs objek subset: stackoverflow.com/questions/1244788/embed-vs-object , iframe vs objek subset: stackoverflow.com/questions/924946/… , embed vs objek vs video: stackoverflow.com/questions/11199048/…
Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功
2
@ KaiQing Apakah mereka terlihat identik atau tidak adalah pendapat Anda, jelas tidak dibagikan oleh OP. Oh, dan omong-omong, itu juga bukan jawaban untuk pertanyaannya.
Malik A. Rumi
1
@Malik - itu sebabnya itu adalah komentar. Dan tidak, kelihatan identik bukan pendapat saya karena definisi masing-masing dengan jelas menguraikan perbedaan dan kapan Anda akan menggunakan masing-masing. Bagaimana mereka muncul di ujung depan secara teoritis bisa terlihat identik tetapi saya pikir konteks OP dalam penggunaan dan bukan penampilan. Komentar tersebut untuk mengilustrasikan bahwa Anda akan menggunakan iframe untuk pihak ketiga, seperti yang mereka minta. Saya hanya dapat berasumsi bahwa saya terlalu sibuk untuk menulis jawaban lengkap saat itu.
Kai Qing
Sekarang MDN memiliki penjelasan rinci developer.mozilla.org/en-US/docs/Learn/HTML/…
ohkts11

Jawaban:

122

<iframe>

Elemen iframe mewakili konteks penelusuran bersarang. Standar HTML 5 - " <iframe>Elemen"

Terutama digunakan untuk memasukkan sumber daya dari domain atau subdomain lain tetapi dapat digunakan untuk memasukkan konten dari domain yang sama juga. The <iframe>'Kekuatan adalah bahwa kode tertanam adalah 'hidup' dan dapat berkomunikasi dengan dokumen induk.

<embed>

Dibakukan dalam HTML 5, sebelum itu adalah tag non standar, yang diakui telah diterapkan oleh semua browser utama. Perilaku sebelum HTML 5 dapat bervariasi ...

Elemen sematan menyediakan titik integrasi untuk aplikasi eksternal atau konten interaktif. ( HTML 5 standar - " <embed>Elemen" )

Digunakan untuk menyematkan konten untuk plugin browser. Pengecualian untuk ini adalah SVG dan HTML yang ditangani secara berbeda sesuai dengan standar.

Rincian tentang apa yang bisa dan tidak bisa dilakukan dengan konten yang disematkan terserah plugin browser yang dimaksud. Tetapi untuk SVG Anda dapat mengakses dokumen SVG tertanam dari induk dengan sesuatu seperti:

svg = document.getElementById("parent_id").getSVGDocument();

Dari dalam dokumen SVG atau HTML tertanam Anda dapat menjangkau induk dengan:

parent = window.parent.document;

Untuk HTML yang disematkan tidak ada cara untuk mendapatkan dokumen yang disematkan dari induknya (yang saya temukan)

<object>

The <object>elemen dapat mewakili sumber daya eksternal, yang, tergantung pada jenis sumber daya, baik akan diperlakukan sebagai gambar, sebagai konteks penjelajahan bersarang, atau sebagai sumber daya eksternal untuk diproses oleh sebuah plugin. ( HTML 5 standar - " <object>Elemen" )

Kesimpulan

Kecuali Anda menanamkan SVG atau sesuatu yang statis, Anda mungkin lebih baik menggunakannya <iframe>. Untuk memasukkan penggunaan SVG <embed>(jika saya ingat dengan benar <object>tidak akan membiarkan Anda skrip †). Jujur saya tidak tahu mengapa Anda akan menggunakan <object>kecuali untuk browser atau flash yang lebih lama (yang saya tidak bekerja dengan).

† Seperti yang ditunjukkan dalam komentar di bawah ini; skrip dalam <object>akan berjalan tetapi konteks orang tua dan anak tidak dapat berkomunikasi secara langsung. Dengan <embed>Anda bisa mendapatkan konteks anak dari orang tua dan sebaliknya. Ini artinya mereka dapat Anda gunakan skrip di induk untuk memanipulasi anak dll. Bagian itu tidak mungkin dengan <object>atau di <iframe>mana Anda harus mengatur beberapa mekanisme lain, seperti JavaScript postMessage API .

Jonas Schubert Erlandsson
sumber
4
embedsangat ideal untuk membuat pengunjung mengikuti rantai pengalihan yang berasal dari situs web yang memblokir framing. (Kami menggunakannya untuk memulai login
gabungan
3
Tidak benar tentang "objek tidak akan membiarkan skrip". schepers.cc/svg/blendups/embedding.html
Dzenly
@Dzenly Skrip yang dideklarasikan di, misalnya, dan SVG yang disertakan via <object>akan berjalan, tetapi tidak mungkin (atau saya tidak mengelola) untuk mendapatkan konteks objek dari halaman induk. Jadi skrip "internal" akan berjalan, skrip "eksternal", dari sudut pandang objek, tidak dapat berkomunikasi dengan konteks objek.
Jonas Schubert Erlandsson
<embed> benar-benar ketinggalan jaman. Saya tidak akan menggunakannya untuk apa pun lagi. Hari ini setiap browser utama dapat menggunakan objek untuk setiap plugin yang mungkin. Jika Anda ingin menggunakan flash dan menentukan jenisnya alih-alih CLSID, ia akan bekerja di setiap browser dengan cara yang sama. Ia bahkan dapat menjalankan applet java. Namun, saya masih akan menggunakan iframe untuk menyematkan halaman eksternal.
Bachsau
2
@ Bachsau karena ini adalah diskusi tentang berbagai opsi dan pengorbanan mereka, rasanya salah jika hanya mengatakan secara kosong <iframe />adalah jalan yang harus ditempuh. Inti dari postingan ini adalah mereka semua berbeda. <embed>masih dalam spesifikasi: w3.org/TR/html5/embedded-content-0.html#the-embed-element , jadi menyebutkan itu dibenarkan. Saya juga merasa sedikit lucu bahwa Anda berpendapat bahwa <embed>sudah ketinggalan jaman dan menyebutkan applet Java dalam kalimat berikutnya :)
Jonas Schubert Erlandsson
28

Salah satu alasan untuk menggunakan objectlebih iframeadalah bahwa objek kembali ukuran konten yang disematkan agar sesuai dengan dimensi objek. paling terkenal di safari di iPhone 4s di mana lebar layarnya 320pxdan html dari URL yang disematkan dapat membuat dimensi lebih besar.

ivanixdev
sumber
9
Bisakah Anda memberi lebih detail dan / atau referensi? Kalau tidak, ini hanya memenuhi syarat sebagai komentar, bukan sebagai jawaban.
cnst
9
ya, tapi ini komentar yang membantu
Malik A. Rumi
1
Ini adalah kasus penggunaan saya, pasti komentar bermanfaat yang bagus. Terima kasih.
Sid
8
iFrame + iPhone = iHeadache
djvg
4

Alasan lain untuk menggunakan objectlebih dari iframe adalah bahwa objectsumber daya sub (ketika <object>melakukan HTTPpermintaan) dianggap sebagai passive/displaydalam hal Mixed content, yang berarti lebih aman ketika Anda harus memiliki Mixed content.

Konten campuran berarti bahwa ketika Anda memiliki httpstetapi sumber daya Anda berasal http.

Referensi: https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content

harunurhan
sumber
Itu tampaknya tidak menjadi kasus berdasarkan pembacaan terkini dari artikel yang ditautkan, yang mencantumkan objek di bawah judul aktif dan pasif. Pasif: "sub-sumber daya (ketika sebuah <object> melakukan permintaan HTTP)" / Aktif: "<object> (atribut data)" (yang terakhir adalah bagaimana Anda memuat permintaan HTTP lain sesuai pertanyaan awal.
Tim Abell