Kapan bagian CDATA diperlukan dalam tag skrip?


907

Apakah tag CDATA pernah diperlukan dalam tag skrip dan jika demikian kapan?

Dengan kata lain, kapan dan di mana ini:

<script type="text/javascript">
//<![CDATA[
...code...
//]]>
</script>

lebih disukai dari ini:

<script type="text/javascript">
...code...
</script>

18
Sekarang XHTML pada dasarnya sudah mati, apakah ini tidak lagi menjadi masalah yang relevan?
allyourcode

80
@allyourcode: apa yang membuat Anda berpikir XHTML sudah mati? HTML5? Ada XHTML5 yang cocok dengannya :)
Doktor J

4
@DoktorJ AFAIK xHTML berada di versi 1. Ini setara dengan HTML adalah versi 4. Ada upaya terkonsentrasi di xHTML 2.0 yang bermaksud untuk mendorong namespace xform, xlink, waktu dan svg ke spec sebagai cara meningkatkan fitur yang sama HTML 5 adalah menambahkan - xform / input-validasi, waktu / animasi, svg / kanvas - tetapi upaya untuk spesifikasi xHTML 2 difokuskan kembali ke fitur HTML 5. Itu bukan untuk mengatakan bahwa xHTML 2 dijatuhkan atau menjadi usang tetapi tidak direncanakan dalam waktu dekat.
Mihai Stancu

14
XHTML tidak mati dalam pengembangan Java Seam / JSF / Facelets.
JoJo

15
@Mihai Stancu - itu tidak sepenuhnya benar. Menurut W3C ada sintaks XML untuk HTML5 : "Sintaks lain yang dapat digunakan untuk HTML5 adalah XML. Sintaks ini kompatibel dengan dokumen dan implementasi XHTML1. Dokumen yang menggunakan sintaks ini perlu disajikan dengan jenis media XML dan elemen perlu untuk diletakkan di namespace w3.org/1999/xhtml mengikuti aturan yang ditetapkan oleh spesifikasi XML. "
BrainSlugs83

Jawaban:


585

Bagian CDATA diperlukan jika Anda memerlukan dokumen Anda untuk diuraikan sebagai XML (misalnya ketika halaman XHTML diartikan sebagai XML) dan Anda ingin dapat menulis secara literal i<10dan a && bbukannyai&lt;10a &amp;&amp; b , dan , karena XHTML akan mengurai kode JavaScript sebagai data karakter yang diuraikan sebagai lawan dari data karakter secara default. Ini bukan masalah dengan skrip yang disimpan dalam file sumber eksternal, tetapi untuk setiap JavaScript inline di XHTML Anda mungkin ingin menggunakan bagian CDATA.

Perhatikan bahwa banyak halaman XHTML tidak pernah dimaksudkan untuk diuraikan sebagai XML dalam hal ini ini tidak akan menjadi masalah.

Untuk artikel yang bagus tentang masalah ini, lihat https://web.archive.org/web/20140304083226/http://javascript.about.com/library/blxhtml.htm


48
Ada banyak hal lebih dari sekadar "validasi". Kebanyakan parser XML yang ketat tidak akan melewati halaman jika mereka mengenai karakter ilegal. Ini lebih dari sekadar membuat W3C bahagia dan menjadi hijau, bukan merah.
Loren Segal

40
Jika Anda menghindari &dan <karakter, Anda tidak perlu bagian CDATA; itu akan bekerja dengan baik di HTML dan XHTML. Anda dapat dengan mudah mencapai ini dengan meletakkan semua kode signifikan dalam skrip eksternal dan hanya menggunakan skrip inline untuk misalnya. inisialisasi variabel (melarikan diri &/ <ke \x26/ \x3Cdalam string literal jika Anda perlu).
bobince

23
Bagaimana dengan HTML5?
Mathew Attlee

5
@Mathew Attle - ini pertanyaan yang bagus. Jadilah pertanyaan yang bagus untuk ditanyakan pada utas terpisah untuk memastikan mendapat perhatian yang dibutuhkan.
Alex KeySmith

3
@ Loren: Maka itu masih sepenuhnya tentang validasi. Sejauh mana agen pengguna menolak XML yang tidak valid adalah ortogonal.
Lightness Races in Orbit

231

Saat browser memperlakukan markup sebagai XML:

<script>
<![CDATA[
    ...code...
]]>
</script>

Saat browser memperlakukan markup sebagai HTML:

<script>
    ...code...
</script>

Saat browser memperlakukan markup sebagai HTML dan Anda ingin markup XHTML 1.0 Anda (misalnya) divalidasi.

<script>
//<![CDATA[
    ...code...
//]]>
</script>

12
Sama seperti masalah keamanan kode, lebih baik mengelilingi CDATA Anda dengan komentar blok /* ... */karena jika tidak jeda baris dihapus, kode akan rusak
BryanH

tidakkah "... sebagai XML" di bagian pertama menjadi "... sebagai teks yang tidak ditafsirkan"? Dalam stackoverflow.com/questions/2784183/what-does-cdata-in-xml-mean kita melihat "... string ini termasuk data yang dapat diartikan sebagai markup XML, tetapi seharusnya tidak."
matt wilkie

@mattwilkie, Yang saya maksud dengan "sebagai XML" adalah "Ketika browser menggunakan parser XML mereka (sebagai lawan parser HTML) untuk mengurai markup karena dokumen dikirim dengan tipe mime berbasis XML atau file yang berisi markup telah ekstensi file berbasis XML ".
Shadow2531

127

HTML

Pengurai HTML akan memperlakukan semuanya antara <script>dan </script>sebagai bagian dari skrip. Beberapa implementasi bahkan tidak memerlukan tag penutup yang benar; mereka menghentikan interpretasi skrip di " </", yang sesuai dengan spesifikasi .

Perbarui dalam HTML5, dan dengan browser saat ini, itu tidak lagi terjadi.

Jadi, dalam HTML, ini tidak mungkin:

<script>
var x = '</script>';
alert(x)
</script>

Sebuah CDATAbagian memiliki pengaruh sama sekali . Itu sebabnya Anda perlu menulis

var x = '<' + '/script>'; // or
var x = '<\/script>';

atau serupa.

Ini juga berlaku untuk file XHTML yang disajikan sebagai text/html. (Karena IE tidak mendukung tipe konten XML, ini sebagian besar benar.)

XML

Dalam XML, aturan yang berbeda berlaku. Perhatikan bahwa browser (bukan IE) hanya menggunakan parser XML jika dokumen XHMTL disajikan dengan tipe konten XML.

Untuk parser XML, scripttag tidak lebih baik dari tag lainnya. Khususnya, simpul skrip dapat berisi simpul anak non-teks, yang dipicu oleh " <"; dan tanda " &" menunjukkan entitas karakter.

Jadi, di XHTML, ini tidak mungkin:

<script>
if (a<b && c<d) {
    alert('Hooray');
}
</script>

Untuk mengatasinya, Anda dapat membungkus seluruh skrip dalam satu CDATAbagian. Ini memberi tahu parser: 'Di bagian ini, jangan memperlakukan " <" dan " &" sebagai karakter kontrol .' Untuk mencegah mesin JavaScript menafsirkan tanda " <![CDATA[" dan " ]]>", Anda dapat membungkusnya dalam komentar.

Jika skrip Anda tidak mengandung " <" atau " &" apa pun, Anda tidak perlu CDATAbagian.


2
Pernyataan "Bagian CDATA tidak memiliki efek sama sekali" tidak berlaku untuk (yang diusulkan) HTML5, yang mengakui konstruk. w3.org/TR/html5/syntax.html#cdata-sections
danorton

3
@danorton Menarik. Saya pikir itu campuran yang sangat jelek. Masih tidak berpengaruh dalam konten skrip.
user123444555621

2
Tidak tahu bahwa tag skrip apa pun </ di dalamnya buruk.
Salman A

3
@SalmanA Itu salah satu keanehan HTML dan secara resmi disebut ETAGO . Pelajari lebih lanjut: mathiasbynens.be/notes/etago (sementara artikel menyatakan bahwa tidak ada browser yang mengimplementasikan fitur itu, saya cukup yakin itu menyebabkan masalah bagi saya. Mungkin di beberapa alat lain)
user123444555621

1
Sebenarnya saya mengalami masalah validasi - <script>var b = "<b>bold</b>";</script>gagal memvalidasi tetapi setelah membaca jawaban Anda dan mengubahnya untuk <script>var b = "<b>bold<\/b>";</script>memperbaikinya.
Salman A

30

Pada dasarnya itu adalah memungkinkan untuk menulis dokumen yang XHTML dan HTML. Masalahnya adalah bahwa dalam XHTML, parser XML akan menginterpretasikan karakter &, <,> dalam tag skrip dan menyebabkan kesalahan parsing XML. Jadi, Anda dapat menulis JavaScript dengan entitas, misalnya:

if (a &gt; b) alert('hello world');

Tapi ini tidak praktis. Masalah yang lebih besar adalah bahwa jika Anda membaca halaman dalam HTML, skrip tag dianggap CDATA 'secara default', dan JavaScript tersebut tidak akan berjalan. Oleh karena itu, jika Anda ingin halaman yang sama baik-baik saja menggunakan XHTML dan parser HTML, Anda harus menyertakan tag skrip dalam elemen CDATA di XHTML, tetapi TIDAK untuk menyertakannya dalam HTML.

Trik ini menandai dimulainya elemen CDATA sebagai komentar JavaScript; dalam HTML parser JavaScript mengabaikan tag CDATA (ini adalah komentar). Dalam XHTML, parser XML (yang dijalankan sebelum JavaScript) mendeteksi dan memperlakukan sisanya hingga akhir CDATA sebagai CDATA.


24

Ini hal X (HT) ML. Ketika Anda menggunakan simbol seperti <dan >dalam JavaScript, misalnya untuk membandingkan dua bilangan bulat, ini harus diuraikan seperti XML, sehingga mereka akan menandai sebagai awal atau akhir tag.

CDATA berarti bahwa baris berikut (semuanya sampai ]]>bukan XML dan karenanya tidak boleh diuraikan seperti itu.


18

Apakah tidak menggunakan CDATA di HTML4 tetapi Anda harus menggunakan CDATA dalam XHTML dan harus menggunakan CDATA dalam XML jika Anda memiliki simbol unescaped seperti <dan>.


11
CDATA tidak valid dalam HTML4. Sederhananya, itu bukan bagian dari tata bahasa. CDATA adalah sintaks XML, dan XHTML adalah subset XML. Oleh karena itu hanya digunakan di dalam XML (dan himpunan bagiannya). Sebaliknya HTML bukan XML.
Loren Segal

17

Itu untuk memastikan bahwa validasi XHTML berfungsi dengan benar ketika Anda memiliki JavaScript yang disematkan di halaman Anda, daripada dirujuk secara eksternal.

XHTML mengharuskan halaman Anda secara ketat mematuhi persyaratan markup XML. Karena JavaScript dapat berisi karakter dengan makna khusus, Anda harus membungkusnya dalam CDATA untuk memastikan bahwa validasi tidak menandainya sebagai cacat.

Dengan halaman HTML di web, Anda hanya bisa memasukkan JavaScript antara dan tag yang diperlukan. Ketika Anda memvalidasi HTML di halaman web Anda, konten JavaScript dianggap sebagai CDATA (data karakter) yang karenanya diabaikan oleh validator. Hal yang sama tidak benar jika Anda mengikuti standar XHTML yang lebih baru dalam mengatur halaman web Anda. Dengan XHTML kode antara tag skrip dianggap PCDATA (data karakter parsed) yang karenanya diproses oleh validator.

Karena itu, Anda tidak bisa hanya memasukkan JavaScript di antara tag skrip pada halaman Anda tanpa 'melanggar' halaman web Anda (setidaknya sejauh menyangkut validator).

Anda dapat mempelajari lebih lanjut tentang CDATA di sini , dan lebih banyak tentang XHTML di sini .



9

Saat Anda menjalankan kepatuhan XHTML yang ketat, Anda memerlukan CDATA sehingga kurang dari dan ampersand tidak ditandai sebagai karakter yang tidak valid.



8

CDATA memberi tahu peramban untuk menampilkan teks apa adanya dan tidak menjadikannya sebagai HTML.


6

CDATA menunjukkan bahwa konten di dalamnya bukan XML.




2

Dengan begitu browser lama tidak mem-parsing kode Javascript dan halaman tidak rusak.

Kompatibilitas mundur. Akan menyukainya.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.