document.write（）で書き込むときに<script>タグを分割する理由

一部のサイト（またはクライアントにJavaScriptコードを提供する広告主）が、呼び出し内でタグ<script>や</script>タグを分割する手法を採用しているのdocument.write()はなぜですか？

アマゾンもこれを行うことに気づきました、例えば：

<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>そうしないと、囲んでいる<script></script>ブロックが早く終了してしまうため、分割する必要があります。本当にそれが間に分割する必要があります<し、/スクリプトブロックがなければ（SGMLに応じて）想定しているので、任意の終了タグオープン（ETAGO）配列（すなわちによって終了します</）：

STYLE要素とSCRIPT要素はデータモデルにCDATAを使用しますが、これらの要素の場合、CDATAはユーザーエージェントによって異なる方法で処理する必要があります。マークアップとエンティティは、生のテキストとして扱われ、そのままアプリケーションに渡される必要があります。文字シーケンス " </"（終了タグの開始区切り文字）の最初の出現は、要素のコンテンツの終了を終了するものとして扱われます。有効なドキュメントでは、これは要素の終了タグになります。

ただし、実際には、ブラウザは実際の</script>終了タグでCDATAスクリプトブロックの解析を終了するだけです。

XHTMLでは、スクリプトブロックにはそのような特別な処理はありません。そのため、その中の<（または&）文字&escaped;は他の要素と同じである必要があります。ただし、XHTMLを古いHTMLとして解析しているブラウザーは混乱します。CDATAブロックに関連する回避策はありますが、これらの文字をエスケープせずに使用しないようにするのが最も簡単です。どちらのタイプのパーサーでも機能するスクリプトからスクリプト要素を記述するより良い方法は次のとおりです。

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

エスケープの形式を必要とせずにスクリプトタグをインラインで（すぐに実行されるように）生成するときに使用した別のバリエーションを次に示します。

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

（注：ネット上のほとんどの例とは異なりtype="text/javascript"、囲みタグも生成されたタグも設定していません。デフォルトとしてそれを持たないブラウザはないため、冗長ですが、害はありません。同意しない場合）。

ブラウザのHTMLパーサーが<script>を解釈しないようにするためだと思いますが、主に</ script>を実際のスクリプトの終了タグとして解釈しますが、document.writeを使用することはスクリプトを評価するための優れたアイデアだとは思いませんブロック、DOMを使用しない理由...

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

ボビンスが投稿したソリューションは、私にとって完璧に機能します。私は将来の訪問者にも代替方法を提供したいと思いました：

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

この例では、使用例を示すためにjQueryの条件付きロードを含めました。それが誰かに役立つことを願っています！

</script>Javascriptの文字列litteral内部は（予期しない動作を引き起こす、終了タグとしてHTMLパーサーによって解釈さJSFiddle上の例を参照します）。

これを回避するには、コメントの間にJavaScriptを配置します（このスタイルのコーディングは、JavaScriptがブラウザー間で十分にサポートされていなかった頃から一般的でした）。これは動作します（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>

...しかし、正直なところ、使用することdocument.writeは私がベストプラクティスと考えるものではありません。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>