Dlaczego warto podzielić tag <script> podczas pisania go za pomocą document.write ()?

Dlaczego niektóre witryny (lub reklamodawcy, którzy podają klientom kod javascript) stosują technikę dzielenia <script>i / lub </script>tagów w ramach document.write()połączeń?

Zauważyłem, że Amazon też to robi, na przykład:

<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>musi zostać rozbity, ponieważ w przeciwnym razie <script></script>zbyt wcześnie zakończyłby blok otaczający . Naprawdę powinien być podzielony na <i /, ponieważ blok skryptu powinien (zgodnie z SGML) być zakończony dowolną sekwencją otwartego znacznika końcowego (ETAGO) (tj. </) :

Chociaż elementy STYLE i SCRIPT używają CDATA w swoim modelu danych, w przypadku tych elementów CDATA musi być obsługiwany w inny sposób przez aplikacje klienckie. Znaczniki i jednostki muszą być traktowane jako nieprzetworzony tekst i przekazywane do aplikacji w niezmienionej postaci. Pierwsze wystąpienie sekwencji znaków „ </” (otwarty separator znacznika końcowego) jest traktowane jako zakończenie końca zawartości elementu. W prawidłowych dokumentach byłby to znacznik końcowy elementu.

Jednak w praktyce przeglądarki kończą tylko parsowanie bloku skryptu CDATA na rzeczywistym </script>tagu close.

W XHTML nie ma takiej specjalnej obsługi bloków skryptów, więc każdy <(lub &) znak w nich musi być &escaped;taki sam jak w każdym innym elemencie. Jednak przeglądarki, które analizują XHTML jako oldschoolowy HTML, będą się mylić. Istnieją obejścia dotyczące bloków CDATA, ale najłatwiej jest po prostu uniknąć używania tych znaków bez zmian. Lepszym sposobem napisania elementu skryptu ze skryptu, który działa na dowolnym parserze, jest:

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

Oto kolejna odmiana, której użyłem, gdy chcę wygenerować znacznik skryptu w wierszu (więc wykonuje się on natychmiast) bez potrzeby stosowania jakichkolwiek znaków zmiany znaczenia:

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

(Uwaga: w przeciwieństwie do większości przykładów w sieci, nie ustawiam type="text/javascript" ani tagu zamykającego, ani generowanego: nie ma przeglądarki, która nie ma tej wartości domyślnej, więc jest redundantna, ale też nie zaszkodzi, jeśli się nie zgadzasz).

Myślę, że ma to na celu zapobieganie interpretacji przez parser HTML HTML <script>, a przede wszystkim </script> jako znacznika zamykającego rzeczywistego skryptu, jednak nie sądzę, że użycie document.write to doskonały pomysł na ocenę skryptu bloki, dlaczego nie użyć DOM ...

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

Rozwiązanie, które opublikował Bobince, działa dla mnie idealnie. Chciałem zaoferować alternatywną metodę również przyszłym użytkownikom:

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);
    })();
}

W tym przykładzie uwzględniłem ładowanie warunkowe dla jQuery, aby zademonstrować przypadek użycia. Mam nadzieję, że jest to przydatne dla kogoś!

</script>Wewnątrz łańcucha litteral JavaScript jest interpretowany przez parser HTML jako znacznika zamykającego, powodując nieoczekiwane zachowanie ( patrz przykład na JSFiddle ).

Aby tego uniknąć, możesz umieścić javascript między komentarzami (ten styl kodowania był powszechną praktyką, kiedy JavaScript był słabo obsługiwany przez przeglądarki). To działałoby ( patrz przykład w 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>

... ale szczerze mówiąc, używanie document.writenie jest czymś, co uważam za najlepszą praktykę. Dlaczego nie manipulować bezpośrednio DOM?

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