Wie hinzufügen von DOM-element Skript den Kopf Abschnitt?

Wenn die Injektion mehrere Skript-tags im Kopf wie das mit der mix von lokalen und remote-Skript-Dateien eine situation entstehen, bei denen die lokale Skripte, die abhängig von externen Skripts (wie das laden der jQuery von googleapis) haben Fehler, weil das externe Skript kann nicht geladen werden, bevor die einheimischen sind.

So etwas wie dies hätte ein problem: ("jQuery ist nicht definiert" in jquery.some-plugin.js).

var head = document.getElementsByTagName('head')[0];

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js";
head.appendChild(script);

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = "/jquery.some-plugin.js";
head.appendChild(script);

Natürlich ist diese situation, was die .onload() ist, aber wenn mehrere Skripte geladen werden, die kann sehr umständlich sein.

Als eine Auflösung dieser situation, ich habe diese Funktion behalten wird, eine Warteschlange von scripts geladen werden, das laden jedes nachfolgende Element, nachdem die Vorherige beendet ist, und gibt ein Versprechen, dass verrechnet wird, wenn das Skript (oder die Letzte Skript in der queue, wenn kein parameter) fertig ist laden.

load_script = function(src) {
    //Initialize scripts queue
    if( load_script.scripts === undefined ) {
        load_script.scripts = [];
        load_script.index = -1;
        load_script.loading = false;
        load_script.next = function() {
            if( load_script.loading ) return;

            //Load the next queue item
            load_script.loading = true;
            var item = load_script.scripts[++load_script.index];
            var head = document.getElementsByTagName('head')[0];
            var script = document.createElement('script');
            script.type = 'text/javascript';
            script.src = item.src;
            //When complete, start next item in queue and resolve this item's promise
            script.onload = () => {
                load_script.loading = false;
                if( load_script.index < load_script.scripts.length - 1 ) load_script.next();
                item.resolve();
            };
            head.appendChild(script);
        };
    };

    //Adding a script to the queue
    if( src ) {
        //Check if already added
        for(var i=0; i < load_script.scripts.length; i++) {
            if( load_script.scripts[i].src == src ) return load_script.scripts[i].promise;
        }
        //Add to the queue
        var item = { src: src };
        item.promise = new Promise(resolve => {item.resolve = resolve;});
        load_script.scripts.push(item);
        load_script.next();
    }

    //Return the promise of the last queue item
    return load_script.scripts[ load_script.scripts.length - 1 ].promise;
};

Mit diesem Skripte hinzufügen, um die Sicherstellung der vorherigen fertig sind vor dem Start des nächsten getan werden kann, wie...

["https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js",
 "/jquery.some-plugin.js",
 "/dependant-on-plugin.js",
].forEach(load_script);

Oder laden Sie das Skript und mit der return-Versprechen zu tun, Arbeit, wenn es fertig ist...

load_script("some-script.js")
.then(function() {
    /* some-script.js is done loading */
});

var script = $('<script type="text/javascript">//function </script>')
document.getElementsByTagName("head")[0].appendChild(script[0])

Aber in diesem Fall-Skript wird nicht ausgeführt werden, und Funktionen werden nicht zugänglich sind, im globalen namespase.
Code verwenden, in <script> Sie tun müssen, wie Sie in Frage

$('head').append(script);

Gemäß dem Autor, Sie möchten ein Skript erstellen, in den Kopf, nicht einen link zu einem Skript-Datei.

Möglicherweise wie folgt durchgeführt:

var script = document.createTextNode("<script>alert('Hi!');</script>");   
document.getElementsByTagName('head')[0].appendChild(script);

Hier ist eine sichere und wieder verwendbare Funktion zum hinzufügen von Skript-an-Kopf-Abschnitt, wenn es nicht schon vorhanden ist.

siehe Beispiel hier: Beispiel

<!DOCTYPE html>
<html>
  <head>
    <base href="/"/>
    <style>
    </style>
  </head>
  <body>
    <input type="button" id="" style='width:250px;height:50px;font-size:1.5em;' value="Add Script" onClick="addScript('myscript')"/>
    <script>
      function addScript(filename)
      {
        //house-keeping: if script is allready exist do nothing
        if(document.getElementsByTagName('head')[0].innerHTML.toString().includes(filename + ".js"))
        {
          alert("script is allready exist in head tag!")
        }
        else
        {
          //add the script
          loadScript('/',filename + ".js");
        }
      }
      function loadScript(baseurl,filename)
      {
        var node = document.createElement('script');
        node.src = baseurl + filename;
        document.getElementsByTagName('head')[0].appendChild(node);
        alert("script added");
      }
    </script>
  </body>
</html>

Verwende ich PHP, da mein Server-Side-Sprache, also das Beispiel, das ich schreiben werde - aber ich bin sicher, es gibt eine Methode im server-Seite als auch.

Müssen nur Ihre Server-Side-Sprache hinzufügen, dass es aus einer variable. w/php sowas würde gehen Sie wie folgt vor.

Tun, beachten Sie, dass dies nur funktioniert, wenn die Skript geladen wird, mit dem laden der Seite.
Wenn Sie möchten, um es zu laden dynamisch, diese Lösung wird dir nicht helfen.

PHP

HTML

<head>
    <script type="text/javascript"> <?php echo $decodedstring ?> </script>
</head>

In der Zusammenfassung: Decodieren mit serverside und legen Sie es in Ihr HTML mit der server Sprache.