Warum das <script> -Tag teilen, wenn es mit document.write () geschrieben wird?

Warum verwenden einige Websites (oder Werbetreibende, die Kunden Javascript-Code geben) eine Technik zum Aufteilen der <script>und / oder </script>Tags innerhalb von document.write()Anrufen?

Mir ist aufgefallen, dass Amazon dies auch tut, zum Beispiel:

<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>muss aufgelöst werden, da sonst der umschließende <script></script>Block zu früh beendet würde. Eigentlich sollte es zwischen dem <und dem aufgeteilt werden /, da ein Skriptblock</ (laut SGML) durch eine beliebige ETAGO-Sequenz (End-Tag Open) (dh ) beendet werden soll :

Obwohl die STYLE- und SCRIPT-Elemente CDATA für ihr Datenmodell verwenden, muss CDATA für diese Elemente von Benutzeragenten unterschiedlich behandelt werden. Markups und Entitäten müssen als Rohtext behandelt und unverändert an die Anwendung übergeben werden. Das erste Auftreten der Zeichenfolge " </" (End-Tag Open Trennzeichen) wird als Abschluss des Endes des Elementinhalts behandelt. In gültigen Dokumenten wäre dies das End-Tag für das Element.

In der Praxis beenden Browser jedoch nur das Parsen eines CDATA-Skriptblocks auf einem tatsächlichen </script> Close-Tag.

In XHTML gibt es keine solche spezielle Behandlung für Skriptblöcke, daher muss jedes <(oder &) Zeichen in ihnen &escaped;wie in jedem anderen Element sein. Dann werden Browser, die XHTML als HTML der alten Schule analysieren, verwirrt. Es gibt Problemumgehungen für CDATA-Blöcke, aber es ist am einfachsten, die Verwendung dieser Zeichen ohne Flucht zu vermeiden. Eine bessere Möglichkeit, ein Skriptelement aus einem Skript zu schreiben, das für beide Parsertypen geeignet ist, ist:

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

Hier ist eine weitere Variante, die ich verwendet habe, um ein Skript-Tag inline zu generieren (damit es sofort ausgeführt wird), ohne dass Escapezeichen erforderlich sind:

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

(Hinweis: Im Gegensatz zu den meisten Beispielen im Internet setze ich type="text/javascript"weder das einschließende noch das generierte Tag ein: Es gibt keinen Browser, der dies nicht als Standard hat, und daher ist es redundant, wird aber auch nicht schaden. wenn Sie nicht einverstanden sind).

Ich denke, dies soll verhindern, dass der HTML-Parser des Browsers das <script> und hauptsächlich das </ script> als schließendes Tag des eigentlichen Skripts interpretiert. Ich denke jedoch nicht, dass die Verwendung von document.write eine hervorragende Idee für die Bewertung von Skripten ist Blöcke, warum nicht das DOM verwenden ...

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

Die von Bobince veröffentlichte Lösung funktioniert perfekt für mich. Ich wollte auch zukünftigen Besuchern eine alternative Methode anbieten:

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

In diesem Beispiel habe ich eine bedingte Last für jQuery eingefügt, um den Anwendungsfall zu demonstrieren. Hoffe das ist nützlich für jemanden!

Das </script>Innere des Javascript-String-Wurfs wird vom HTML-Parser als schließendes Tag interpretiert, was zu unerwartetem Verhalten führt ( siehe Beispiel zu JSFiddle) ).

Um dies zu vermeiden, können Sie Ihr Javascript zwischen Kommentaren platzieren (diese Art der Codierung war gängige Praxis, als Javascript in Browsern nur unzureichend unterstützt wurde). Dies würde funktionieren ( siehe Beispiel in 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>

... aber um ehrlich zu sein, document.writewürde ich die Verwendung nicht als Best Practice betrachten. Warum nicht das DOM direkt manipulieren?

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