Mengapa membagi tag <script> saat menulisnya dengan document.write ()?

Mengapa beberapa situs (atau pengiklan yang memberikan kode javascript klien) menggunakan teknik pemisahan <script>dan / atau </script>tag dalam document.write()panggilan?

Saya perhatikan bahwa Amazon juga melakukan ini, misalnya:

<script type='text/javascript'>
  if (typeof window['jQuery'] == 'undefined') document.write('<scr'+'ipt type="text/javascript" src="http://z-ecx.images-amazon.com/images/G/01/javascripts/lib/jquery/jquery-1.2.6.pack._V265113567_.js"></sc'+'ript>');
</script>

</script>harus dipecah karena jika tidak maka akan mengakhiri <script></script>blok penutup terlalu dini. Benar-benar harus dibagi antara <dan /, karena blok skrip seharusnya (menurut SGML) diakhiri oleh setiap urutan tag-end terbuka (ETAGO) (yaitu </) :

Meskipun elemen STYLE dan SCRIPT menggunakan CDATA untuk model datanya, untuk elemen-elemen ini, CDATA harus ditangani secara berbeda oleh agen pengguna. Markup dan entitas harus diperlakukan sebagai teks mentah dan diteruskan ke aplikasi apa adanya. Kemunculan pertama dari urutan karakter " </" (pembatas tag terbuka-tag) diperlakukan sebagai pengakhiran akhir konten elemen. Dalam dokumen yang valid, ini akan menjadi tag akhir untuk elemen.

Namun dalam praktiknya browser hanya mengakhiri penguraian blok skrip CDATA pada </script>tag- sebenarnya .

Di XHTML tidak ada penanganan khusus untuk blok skrip, sehingga setiap <(atau &) karakter di dalamnya harus &escaped;seperti di elemen lain. Namun, browser yang mem-parsing XHTML sebagai HTML lama akan bingung. Ada beberapa solusi yang melibatkan blok CDATA, tetapi paling mudah untuk menghindari penggunaan karakter ini tanpa hambatan. Cara yang lebih baik untuk menulis elemen skrip dari skrip yang bekerja pada kedua jenis parser adalah:

<script type="text/javascript">
    document.write('\x3Cscript type="text/javascript" src="foo.js">\x3C/script>');
</script>

Berikut variasi lain yang telah saya gunakan ketika ingin membuat inline tag skrip (jadi langsung dieksekusi) tanpa perlu bentuk apa pun:

<script>
    var script = document.createElement('script');
    script.src = '/path/to/script.js';
    document.write(script.outerHTML);
</script>

(Catatan: bertentangan dengan sebagian besar contoh di internet, saya tidak mengatur type="text/javascript"tag terlampir, maupun yang dibuat: tidak ada browser yang tidak memiliki itu sebagai default, dan karena itu berlebihan, tetapi tidak ada salahnya juga, jika Anda tidak setuju).

Saya pikir ini untuk mencegah parser HTML peramban dari menafsirkan <script>, dan terutama </script> sebagai tag penutup skrip aktual, namun saya tidak berpikir bahwa menggunakan document.write adalah ide bagus untuk mengevaluasi skrip blok, mengapa tidak menggunakan DOM ...

var newScript = document.createElement("script");
...

Solusi yang diposting Bobince bekerja dengan sempurna untuk saya. Saya ingin menawarkan metode alternatif juga untuk pengunjung masa depan:

if (typeof(jQuery) == 'undefined') {
    (function() {
        var sct = document.createElement('script');
        sct.src = ('https:' == document.location.protocol ? 'https' : 'http') +
          '://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js';
        sct.type = 'text/javascript';
        sct.async = 'true';
        var domel = document.getElementsByTagName('script')[0];
        domel.parentNode.insertBefore(sct, domel);
    })();
}

Dalam contoh ini, saya telah menyertakan pemuatan bersyarat untuk jQuery untuk menunjukkan use case. Semoga bermanfaat bagi seseorang!

Bagian </script>dalam string Javascript diinterpretasi oleh parser HTML sebagai tag penutup, menyebabkan perilaku yang tidak terduga ( lihat contoh di JSFiddle ).

Untuk menghindari ini, Anda dapat menempatkan javascript di antara komentar (gaya pengkodean ini adalah praktik umum, ketika Javascript kurang didukung di antara browser). Ini akan berhasil ( lihat contoh di JSFiddle ):

<script type="text/javascript">
    <!--
    if (jQuery === undefined) {
        document.write('<script type="text/javascript" src="http://z-ecx.images-amazon.com/images/G/01/javascripts/lib/jquery/jquery-1.2.6.pack._V265113567_.js"></script>');
    }
    // -->
</script>

... tapi jujur ​​saja, menggunakan document.writebukanlah sesuatu yang saya anggap sebagai praktik terbaik. Mengapa tidak memanipulasi DOM secara langsung?

<script type="text/javascript">
    <!--
    if (jQuery === undefined) {
        var script = document.createElement('script');
        script.setAttribute('type', 'text/javascript');
        script.setAttribute('src', 'http://z-ecx.images-amazon.com/images/G/01/javascripts/lib/jquery/jquery-1.2.6.pack._V265113567_.js');
        document.body.appendChild(script);
    }
    // -->
</script>