it-swarm.com.de

Wie kann ich den Inhalt der Datei als 'src' eines <script> -Tags angeben?

Wenn ich ein Skript-Tag wie dieses habe:

<script
    id = "myscript"
    src = "http://www.example.com/script.js"
    type = "text/javascript">
</script>

Ich möchte den Inhalt der Datei "script.js" erhalten. Ich denke an etwas wie document.getElementById("myscript").text, aber in diesem Fall funktioniert es nicht.

58

Sie möchten den Inhalt der Datei http://www.example.com/script.js abrufen? Wenn dies der Fall ist, können Sie sich an die Methoden AJAX wenden, um den Inhalt abzurufen, vorausgesetzt, der Inhalt befindet sich auf demselben Server wie die Seite selbst.

Könnten Sie näher erläutern, was Sie erreichen wollen? 

9
Lasar

Ich weiß, dass es etwas spät ist, aber einige Browser unterstützen die Eigenschaft Tag LINK rel="import".

http://www.html5rocks.com/de/tutorials/webcomponents/imports/

<link rel="import" href="/path/to/imports/stuff.html">

Im übrigen ist Ajax immer noch der bevorzugte Weg.

9
Sauleil

Ich glaube nicht, dass die Inhalte über das DOM verfügbar sein werden. Sie können den Wert des Attributs "src" abrufen und mit AJAX die Datei vom Server anfordern.

5
Dan Goldstein

tl; dr Skript-Tags unterliegen nicht CORS und Same-Origin-Policy . Daher kann Javascript/DOM keinen Zugriff auf den Textinhalt der geladenen Ressource bieten über ein <script>-Tag, oder es würde same-Origin-policy brechen. 

long version: Die meisten anderen Antworten (und die akzeptierte Antwort) zeigen korrekt an, dass der Weg "correct" den Textinhalt einer Javascript-Datei abruft, die über einen in die Seite geladenen <script> eingefügt wurde , verwendet ein XMLHttpRequest , um eine weitere separate zusätzliche Anforderung für die in der src-Eigenschaft des Scripts angegebene Ressource auszuführen. Dies wird durch den nachstehenden kurzen JavaScript-Code demonstriert. Ich habe jedoch herausgefunden, dass die anderen Antworten nicht den Punkt angesprochen haben, warum der Textinhalt der Javascript-Dateien abgerufen werden soll. Dies bedeutet, dass der Zugriff auf den Inhalt der über <script src=[url]></script> enthaltenen Datei die CORS-Richtlinien, z. Moderne Browser verhindern die XHR von Ressourcen, die keinen Access-Control-Allow-Origin -Header bereitstellen. Daher erlauben Browser keinen anderen Weg als die, die CORS unterliegen, um den Inhalt abzurufen.

Mit dem folgenden Code (wie in den anderen Fragen "XHR/AJAX verwenden") ist es möglich, eine weitere Anforderung für alle nicht inline Skript-Tags im Dokument auszuführen.

function printScriptTextContent(script)
{
  var xhr = new XMLHttpRequest();
  xhr.open("GET",script.src)
  xhr.onreadystatechange = function () {
    if(xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
      console.log("the script text content is",xhr.responseText);
    }
  };
  xhr.send();
}
Array.prototype.slice.call(document.querySelectorAll("script[src]")).forEach(printScriptTextContent);

und deshalb werde ich das nicht wiederholen, sondern möchte stattdessen über diese Antwort den Aspekt hinzufügen, warum es so ist 

1

ja, Ajax ist der Weg, wie in akzeptierter Antwort. Wenn Sie zu den Details kommen, gibt es viele Fallstricke. Wenn Sie jQuery.load(...) verwenden, wird der falsche Inhaltstyp angenommen (html anstelle von application/javascript). Dies kann zu einem Chaos führen, indem unerwünschter <br> in Ihren (scriptNode) .innerText und ähnliches eingefügt wird. Wenn Sie dann jQuery.getScript(...) verwenden, wird das heruntergeladene Skript sofort ausgeführt. Dies ist möglicherweise nicht das, was Sie möchten (es könnte die Reihenfolge beeinträchtigen, in der Sie die Dateien laden möchten, falls Sie mehrere davon haben.)

Ich fand es am besten, jQuery.ajax mit dataType: "text" zu verwenden.

Ich habe diese Ajax-Technik in einem Projekt mit einem Frameset verwendet, bei dem das Frameset und/oder mehrere Frames dasselbe JavaScript benötigen, um zu vermeiden, dass der Server dieses JavaScript mehrmals sendet.

Hier ist Code, getestet und funktioniert:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
    <head>
        <script id="scriptData">
            var scriptData = [
                { name: "foo"    , url: "path/to/foo"    },
                { name: "bar"    , url: "path/to/bar"    }
            ];
        </script>
        <script id="scriptLoader">
            var LOADER = {
                loadedCount: 0,
                toBeLoadedCount: 0,
                load_jQuery: function (){
                    var jqNode = document.createElement("script");
                    jqNode.setAttribute("src", "/path/to/jquery");
                    jqNode.setAttribute("onload", "LOADER.loadScripts();");
                    jqNode.setAttribute("id", "jquery");
                    document.head.appendChild(jqNode);
                },
                loadScripts: function (){
                    var scriptDataLookup = this.scriptDataLookup = {};
                    var scriptNodes = this.scriptNodes = {};
                    var scriptNodesArr = this.scriptNodesArr = [];
                    for (var j=0; j<scriptData.length; j++){
                        var theEntry = scriptData[j];
                        scriptDataLookup[theEntry.name] = theEntry;
                    }
                    //console.log(JSON.stringify(scriptDataLookup, null, 4));
                    for (var i=0; i<scriptData.length; i++){
                        var entry = scriptData[i];
                        var name = entry.name;
                        var theURL = entry.url;
                        this.toBeLoadedCount++;
                        var node = document.createElement("script");
                        node.setAttribute("id", name);
                        scriptNodes[name] = node;
                        scriptNodesArr.Push(node);
                        jQuery.ajax({
                            method   : "GET",
                            url      : theURL,
                            dataType : "text"
                        }).done(this.makeHandler(name, node)).fail(this.makeFailHandler(name, node));
                    }
                },
                makeFailHandler: function(name, node){
                    var THIS = this;
                    return function(xhr, errorName, errorMessage){
                        console.log(name, "FAIL");
                        console.log(xhr);
                        console.log(errorName);
                        console.log(errorMessage);
                        debugger;
                    }
                },
                makeHandler: function(name, node){
                    var THIS = this;
                    return function (fileContents, status, xhr){
                        THIS.loadedCount++;
                        //console.log("loaded", name, "content length", fileContents.length, "status", status);
                        //console.log("loaded:", THIS.loadedCount, "/", THIS.toBeLoadedCount);
                        THIS.scriptDataLookup[name].fileContents = fileContents;
                        if (THIS.loadedCount >= THIS.toBeLoadedCount){
                            THIS.allScriptsLoaded();
                        }
                    }
                },
                allScriptsLoaded: function(){
                    for (var i=0; i<this.scriptNodesArr.length; i++){
                        var scriptNode = this.scriptNodesArr[i];
                        var name = scriptNode.id;
                        var data = this.scriptDataLookup[name];
                        var fileContents = data.fileContents;
                        var textNode = document.createTextNode(fileContents);
                        scriptNode.appendChild(textNode);
                        document.head.appendChild(scriptNode); // execution is here
                        //console.log(scriptNode);
                    }
                    // call code to make the frames here
                }
            };
        </script>
    </head>
    <frameset rows="200pixels,*" onload="LOADER.load_jQuery();">
        <frame src="about:blank"></frame>
        <frame src="about:blank"></frame>
    </frameset>
</html>

verwandte Frage

0

wenn Sie den Inhalt des Attributs "src" wünschen, müssen Sie eine Ajax-Anforderung ausführen und den Antworttext anzeigen. Wenn Sie sich zwischen den js befinden und Sie könnten über innerHTML darauf zugreifen.

Dies könnte von Interesse sein: http://ejohn.org/blog/degrading-script-tags/

0
olle

.text hat den Inhalt des Tags erhalten. Es ist nur so, dass sich zwischen Ihrem offenen Tag und Ihrem End-Tag nichts befindet. Sie können das src-Attribut des Elements mithilfe von .src abrufen. Wenn Sie die JavaScript-Datei abrufen möchten, folgen Sie dem Link und stellen eine Ajax-Anforderung dafür.

0
airportyh

In einem Kommentar zu meiner vorherigen Antwort:

Ich möchte den Inhalt des Skripts speichern, damit ich es zwischenspeichern und direkt verwenden kann, ohne es vom externen Webserver abrufen zu müssen (nicht auf demselben Server wie die Seite).

In diesem Fall ist es besser, ein serverseitiges Skript zum Abrufen und Zwischenspeichern der Skriptdatei zu verwenden. Abhängig von Ihrem Server-Setup können Sie die Datei einfach abrufen (in regelmäßigen Abständen über cron, falls Sie eine Änderung erwarten) oder etwas Ähnliches mit einem kleinen Skript in der Sprache Ihrer Wahl ausführen.

0
Lasar