Misalnya, yang merupakan perbedaan antara ini:
<iframe srcdoc="<p>Some HTML</p>"></iframe>
<iframe src="data:text/html,<p>Some HTML</p>"></iframe>
[Demo][1]
Dan, dalam kasus mereka persis sama, kenapa HTML5 menambahkan srcdoc
atribut?
Edit
Mungkin aku wasn't cukup jelas. Saya tidak membandingkan src
dengan srcdoc
, tapi src
menggunakan text/html data URI dengan srcdoc
.
Kemudian, jika fungsi grafik adalah seperti ini
| src atribut | atribut srcdoc -------------------------------------------------------------------- URL | Ya | Tidak tanpa menggunakan src (*) Konten HTML | Ya, dengan menggunakan data URI | Ya
mengapa srcdoc
yang dibutuhkan?
*() Note**:
Tampaknya srcdoc
dapat digunakan untuk memuat halaman dengan URL ([Demo][2]), menggunakan subiframe dengan `src'attribute:
<iframe srcdoc="<iframe src='http://microsoft.com'></iframe>"></iframe>
Lain jawaban daftar beberapa perbedaan dangkal, tapi benar-benar meleset dari perbedaan utama yang menjelaskan mengapa browser/spec penulis akan pada dasarnya menduplikasi sesuatu yang sudah ada:
<iframe src="data:...terpercaya content" sandbox />
<- Aman di browser modern, aman di browser lawas dengan tidak ada dukungan sandbox
<iframe srcdoc="...terpercaya content" sandbox />
<- Aman di browser modern, aman (meskipun non-fungsional) di browser lawas
Ini baru menyediakan sintaks penulis konten cara untuk melindungi pengguna mereka, bahkan ketika mereka mungkin menggunakan browser warisan. Tanpa itu, penulis konten akan enggan untuk menggunakan fitur sandbox sama sekali, dan itu tidak akan melihat menggunakan.
Dari MDN :
1. isi dari halaman yang tertanam konteks ini mengandung. Ini atribut ini diharapkan dapat digunakan bersama-sama dengan pasir dan mulus atribut. Jika browser mendukung srcdoc atribut, itu akan menimpa isi yang ditentukan dalam atribut src (jika ada). Jika browser TIDAK mendukung srcdoc atribut, itu akan menunjukkan file yang ditentukan dalam atribut src sebaliknya (jika ada).
Jadi, srcdoc
atribut menimpa konten tertanam menggunakan src
atribut.
[Demo][1]
Juga, apa yang anda katakan tentang cuplikan berikut data:text/html
disebut Data URI dan memiliki keterbatasan..
2. Uri Data tidak dapat lebih besar dari 32,768 karakter.
Seperti tulisan - srcdoc di Chrome (v36) memungkinkan pengaturan dan mengambil cookie, sedangkan penggunaan src dengan data URL tidak:
Tertangkap SecurityError: Gagal untuk membaca 'kue' milik dari 'Dokumen': Cookie dinonaktifkan dalam 'data:' Url
Ini mungkin atau mungkin tidak penting bagi anda, tapi aturan penggunaan data Url di aplikasi saya bangunan, yang merupakan rasa malu, karena tentu saja IE doesn't dukungan srcdoc saat ini (v11).
Lain perbedaan yang nyata adalah bahwa src
atribut dengan data-uri mendukung URI persen-aturan pengkodean sementara srcdoc
doesn't karena mendukung sintaks html biasa,
sumber-sumber ini akan memberikan hasil yang berbeda:
<iframe srcdoc="<p>hello%20world</p><h1>give%0D%0Ame%0D%0Asome%24</h1>"></iframe>
<iframe src="data:text/html;charset=UTF-8,<p>hello%20datauri<p><h1>give%0D%0A me%0D%0Asome%24</h1>"></iframe>
Saya juga melihat perbedaan dalam parsing script js di dalam atribut nilai( it's mungkin lebih dari sekedar persentase-encoding ) tetapi didn't sosok aturan belum...
Dalam contoh dua bentuk yang fungsional identik. Namun, anda dapat menggunakan kedua src
dan srcdoc
atribut, yang memungkinkan non-browser HTML5 untuk menggunakan src
versi, sementara browser HTML5 dapat menggunakan srcdoc
versi bersama dengan sandbox
dan mulus
atribut yang menawarkan lebih banyak fleksibilitas dalam cara iFrame diperlakukan.
srcdoc: isi dari halaman yang tertanam konteks ini mengandung. Atribut ini diharapkan dapat digunakan bersama-sama dengan pasir dan mulus atribut. Jika browser mendukung srcdoc atribut, itu akan menimpa isi yang ditentukan dalam atribut src (jika ada). Jika browser TIDAK mendukung srcdoc atribut, itu akan menunjukkan file yang ditentukan dalam atribut src sebaliknya (jika ada).
src: URL dari halaman ke cantumkan.
Perbedaan utama adalah bahwa 'src' atribut berisi alamat dari dokumen yang akan anda cantumkan dalam <iframe> tag.
Di sisi lain 'srcdoc'atribut berisi konten HTML dari halaman untuk menampilkan dalam inline frame.
kelemahan utama dari srcdoc adalah bahwa hal itu tidak didukung di semua browser sedangkan src kompatibel dengan semua browser.
untuk penjelasan rinci, silakan pergi melalui link berikut: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe