wake-up-neo.com

Wie füge ich ein DOM-Elementskript zum Kopfabschnitt hinzu

Ich möchte ein DOM-Element zum HTML-Kopfabschnitt hinzufügen. jQuery erlaubt nicht das Hinzufügen eines DOM-Elementskripts zum head-Abschnitt und sie führen stattdessen Reference aus. 

Ich möchte script-Tags hinzufügen und ein Skript im Abschnitt <head> schreiben.

var script = '<script type="text/javascript"> //function </script>'
$('head').append(script);

So etwas mit Funktionen. Ich habe versucht jQuery und Javascript \, aber es funktioniert nicht.

Bitte sagen Sie mir, wie Sie script per jQuery oder Javascript hinzufügen und schreiben.

Ich habe das Javascript ermüdet, um ein DOM-Element hinzuzufügen, aber es funktioniert nicht mit .innerHTML(), um in den Kopf zu schreiben. Ich verwende jQuery 2.0.3 und jQuery UI 1.10.3.

Ich möchte base64-codiertes Skript zum Kopfabschnitt hinzufügen. Ich benutze base64 decoder js wie this , um das Javascript zu decodieren und dann den Kopfabschnitt anzulegen.

// bearbeitet
Es wird sein 

$.getScript('base64.js');
var encoded = "YWxlcnQoImhpIik7DQo="; //More text
var decoded = decodeString(encoded);
var script = '<script type="text/javascript">' +decoded + '</script>';
$('head').append(script);

Ein verschlüsseltes Skript und den Zusatz in eine Javascript-Datei einfügen. Ich möchte base64.js oder andere Decoder-Javascript-Dateien für Browser verwenden, akzeptiert atob() nicht.

9
john3825

versuche dies

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'url';    

document.getElementsByTagName('head')[0].appendChild(script);
33
pbaris

Wenn Sie mehrere Skript-Tags wie diese mit einer Mischung aus lokalen und Remote-Skriptdateien in den Kopf einfügen, kann dies zu Situationen führen, in denen die lokalen Skripts, die von externen Skripts abhängig sind (z. B. das Laden von jQuery von googleapis), Fehler enthalten, da die externen Skripts möglicherweise nicht vorhanden sind vor den lokalen geladen werden.

So etwas 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 dies die Aufgabe von .onload (), aber wenn mehrere Skripts geladen werden, kann dies mühsam sein.

Als Lösung für diese Situation habe ich diese Funktion zusammengestellt, die eine Warteschlange mit zu ladenden Skripts enthält, jedes nachfolgende Element nach dem letzten Abschluss lädt und ein Promise zurückgibt, das aufgelöst wird, wenn das Skript (oder das letzte Skript in der Warteschlange, falls) Kein Parameter) wird geladen.

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 Hinzufügen von Skripten in der Reihenfolge, dass die vorherigen erledigt sind, bevor das nächste gestartet werden kann, kann wie folgt vorgegangen werden.

["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 verwenden Sie das Return-Promise, um die Arbeit zu erledigen, wenn es abgeschlossen ist ...

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

ausprobieren ::

var script = document.createElement("script");
script.type="text/javascript";
script.innerHTML="alert('Hi!');";
document.getElementsByTagName('head')[0].appendChild(script);

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

In diesem Fall wird das Skript jedoch nicht ausgeführt und auf Funktionen kann in der globalen Namespase nicht zugegriffen werden. Um Code in <script> zu verwenden, müssen Sie wie in Ihrer Frage vorgehen

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

2
Dmitry Masley

Dies ist eine alte Frage, und ich weiß, dass sie speziell nach dem Hinzufügen eines Skript-Tags in den Kopf gefragt ist. Auf der Grundlage der OP-Erklärungen beabsichtigen sie jedoch lediglich, etwas JS-Code auszuführen, der über eine andere JS-Funktion erhalten wurde.

Dies ist viel einfacher als das Hinzufügen eines Skript-Tags in die Seite.

Einfach:

eval(decoded);

Eval führt eine Reihe von JS-Inline-Zeilen aus, ohne dass sie dem DOM hinzugefügt werden müssen.

Ich glaube nicht, dass es wirklich notwendig ist, dem DOM nach dem Laden der Seite ein Inline-Skript-Tag hinzuzufügen.

Mehr Infos hier: http://www.w3schools.com/jsref/jsref_eval.asp

2
Luke McGregor

Beste Lösung, die ich gefunden habe:

Append_To_Head('script', ' alert("hii"); ');
//or
Append_To_Head('script', 'http://example.com/script.js ');
//or
Append_To_Head('style',  ' #myDiv{color:red;} ');
//or
Append_To_Head('style',  'http://example.com/style.css ');



function Append_To_Head(elemntType, content){
    // if provided content is "link" or "inline codes"
    var Is_Link = content.split(/\r\n|\r|\n/).length <= 1  &&  content.indexOf("/") > -1;
    if(Is_Link){
        if (elemntType=='script')    { var x=document.createElement('script');x.id=id;  x.src=content;  x.type='text/javascript'; }
        else if (elemntType=='style'){ var x=document.createElement('link');  x.id=id;  x.href=content; x.type='text/css';  x.rel = 'stylesheet'; }
    }
    else{
        var x = document.createElement(elemntType);
        if (elemntType=='script')    { x.type='text/javascript';    x.innerHTML = content;  }
        else if (elemntType=='style'){ x.type='text/css';    if (x.styleSheet){ x.styleSheet.cssText=content; } else { x.appendChild(document.createTextNode(content)); }   }
    }
    //append in head
    (document.head || document.getElementsByTagName('head')[0]).appendChild(x);
}
1
T.Todua

Laut Autor möchten sie im Kopf ein Skript erstellen, nicht einen Link zu einer Skriptdatei.

Das kann möglicherweise als solches getan werden:

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

Hier ist eine sichere und wiederverwendbare Funktion, um dem Kopfabschnitt ein Skript hinzuzufügen, falls es dort noch nicht vorhanden ist.

siehe Arbeitsbeispiel 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>
0
jonathana

Ich verwende PHP als serverseitige Sprache, also schreibe ich das Beispiel - aber ich bin sicher, dass es auch eine Methode auf Ihrer Serverseite gibt.

Lassen Sie einfach Ihre serverseitige Sprache aus einer Variablen hinzufügen. w/php so etwas würde wie folgt gehen.

Beachten Sie, dass dies nur funktioniert, wenn das Skript mit der Seite load ..__ geladen wird. Wenn Sie es dynamisch laden möchten, hilft Ihnen diese Lösung nicht.

PHP

HTML

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

In der Zusammenfassung: Mit serverside dekodieren und mit der Serversprache in HTML einfügen.

0
Ulad Kasach

du könntest es tun:

var scriptTag = document.createElement("script");
scriptTag.type = "text/javascript";
scriptTag.src = "script_source_here";
(document.getElementsByTagName("head")[0] || document.documentElement ).appendChild(scriptTag);
0