Können Skripten eingefügt werden, die mit innerHTML?

Hier ist eine sehr interessante Lösung für Ihr problem:
http://24ways.org/2005/have-your-dom-and-script-it-too

So verwenden Sie diese anstelle von script-tags:

<img src="empty.gif" onload="alert('test');this.parentNode.removeChild(this);" />

Können Sie ein Skript erstellen und dann injizieren Sie den Inhalt.

var g = document.createElement('script');
var s = document.getElementsByTagName('script')[0];
g.text = "alert(\"hi\");"
s.parentNode.insertBefore(g, s);

Dies funktioniert in allen Browsern 🙂

Für jemand, der noch versucht, dies zu tun, Nein, Sie können nicht Spritzen, ein Skript mit innerHTML, aber es ist möglich, laden Sie eine Zeichenfolge in einen script-tag mit einem Blob und URL.createObjectURL.

Habe ich ein Beispiel erstellt, die Sie können, führen Sie einen string als ein Drehbuch und bekommen die 'exports' des Skripts zurückgegeben durch ein Versprechen:

function loadScript(scriptContent, moduleId) {
    //create the script tag
    var scriptElement = document.createElement('SCRIPT');

    //create a promise which will resolve to the script's 'exports'
    //(i.e., the value returned by the script)
    var promise = new Promise(function(resolve) {
        scriptElement.onload = function() {
            var exports = window["__loadScript_exports_" + moduleId];
            delete window["__loadScript_exports_" + moduleId];
            resolve(exports);
        }
    });

    //wrap the script contents to expose exports through a special property
    //the promise will access the exports this way
    var wrappedScriptContent =
        "(function() { window['__loadScript_exports_" + moduleId + "'] = " + 
        scriptContent + "})()";

    //create a blob from the wrapped script content
    var scriptBlob = new Blob([wrappedScriptContent], {type: 'text/javascript'});

    //set the id attribute
    scriptElement.id = "__loadScript_module_" + moduleId;

    //set the src attribute to the blob's object url 
    //(this is the part that makes it work)
    scriptElement.src = URL.createObjectURL(scriptBlob);

    //append the script element
    document.body.appendChild(scriptElement);

    //return the promise, which will resolve to the script's exports
    return promise;
}

...

function doTheThing() {
    //no evals
    loadScript('5 + 5').then(function(exports) {
         //should log 10
        console.log(exports)
    });
}

Habe ich diese vereinfacht von meinem eigentlichen Umsetzung, so dass kein Versprechen, dass es keine Fehler in ihm. Aber das Prinzip funktioniert.

Wenn Sie kümmern sich nicht darum, irgendeinen Wert zurück, nachdem das Skript ausgeführt wird, ist es noch leichter; lassen Sie einfach die Promise und onload bits. Sie nicht sogar brauchen, wickeln Sie das Skript oder erstellen Sie die globalen window.__load_script_exports_ Eigenschaft.

Krasimir Tsonev hat eine tolle Lösung, die überwindung aller Probleme.
Seine Methode muss nicht mit eval, also keine Leistung noch security Probleme vorhanden.
Es erlaubt das setzen von innerHTML-string enthält html mit js und übersetzen Sie es sofort auf ein DOM-element, während auch führt die js Teile vorhanden sind, die entlang den code. kurz ,einfach und funktioniert genau so, wie Sie wollen.

Genießen seine Lösung:

http://krasimirtsonev.com/blog/article/Convert-HTML-string-to-DOM-element

Wichtige Hinweise:

1. Müssen Sie wickeln Sie das Ziel-element mit div-Tags
2. Müssen Sie wickeln Sie den src-string mit div-tag.
3. Wenn Sie schreiben die src-string direkt, und es beinhaltet js-Teile, nehmen Sie bitte Aufmerksamkeit, die zum schreiben der schließende script-tags korrekt (mit \ vor dem /), denn dies ist ein string.

Ja, Sie können, aber Sie haben, es zu tun außerhalb des DOM und den Auftrag hat, im Recht zu sein.

var scr = '<scr'+'ipt>alert("foo")</scr'+'ipt>';
window.onload = function(){
    var n = document.createElement("div");
    n.innerHTML = scr;
    document.body.appendChild(n);
}

...Alarm 'foo'. Das wird nicht funktionieren:

document.getElementById("myDiv").innerHTML = scr;

- Und auch dies wird nicht funktionieren, da der Knoten wird zuerst eingefügt:

var scr = '<scr'+'ipt>alert("foo")</scr'+'ipt>';
window.onload = function(){
    var n = document.createElement("div");
    document.body.appendChild(n);
    n.innerHTML = scr;  
}

Könnte man es so machen:

var mydiv = document.getElementById("mydiv");
var content = "<script>alert(\"hi\");<\/script>";

mydiv.innerHTML = content;
var scripts = mydiv.getElementsByTagName("script");
for (var i = 0; i < scripts.length; i++) {
    eval(scripts[i].innerText);
}

Gabriel Garcia erwähnen, der MutationObservers ist auf dem richtigen Weg, aber nicht ganz für mich arbeiten. Ich bin nicht sicher, ob das war, weil der eine browser Eigenart oder durch einen Fehler auf mein Ende, aber die version, endete für mich zu arbeiten, war die folgende:

document.addEventListener("DOMContentLoaded", function(event) {
    var observer = new MutationObserver(mutations=>{
        mutations.map(mutation=>{
            Array.from(mutation.addedNodes).map(node=>{
                if (node.tagName === "SCRIPT") {
                    var s = document.createElement("script");
                    s.text=node.text;
                    if (typeof(node.parentElement.added) === 'undefined')
                        node.parentElement.added = [];
                    node.parentElement.added[node.parentElement.added.length] = s;
                    node.parentElement.removeChild(node);
                    document.head.appendChild(s);
                }
            })
        })
    })
    observer.observe(document.getElementById("element_to_watch"), {childList: true, subtree: true,attributes: false});
};

Sollte man natürlich ersetzen element_to_watch mit dem Namen des Elements, das geändert wird.

node.parentElement.added dient zum speichern der script-tags, die Hinzugefügt werden, um document.head. In der Funktion zum laden der externen Seite, können Sie etwas wie das folgende zu entfernen, die nicht mehr entsprechenden script-tags:

function freeScripts(node){
    if (node === null)
        return;
    if (typeof(node.added) === 'object') {
        for (var script in node.added) {
            document.head.removeChild(node.added[script]);
        }
        node.added = {};
    }
    for (var child in node.children) {
        freeScripts(node.children[child]);
    }
}

Und ein Beispiel für den Anfang einer laden-Funktion:

function load(url, id, replace) {
    if (document.getElementById(id) === null) {
        console.error("Element of ID "+id + " does not exist!");
        return;
    }
    freeScripts(document.getElementById(id));
    var xhttp = new XMLHttpRequest();
    //proceed to load in the page and modify innerHTML
}

Execute (Java-Script) - tag von innerHTML

Ersetzen Sie Ihre script-element mit div mit einer class-Attribut class="javascript", und schließen Sie es mit </div>

Nicht ändern Sie den Inhalt, den Sie ausführen wollen (vorher war es im script-tag und nun ist es in den div-tag)

Hinzufügen Stil in Ihre Seite ein...

<style type="text/css"> .javascript { display: none; } </style>

Nun eval ausführen mit jquery(Jquery js sollte bereits im Lieferumfang enthalten)

   $('.javascript').each(function() {
      eval($(this).text());

    });`

Erkunden Sie mehr hier, auf meinem blog.