Können Skripte mit innerHTML eingefügt werden?

223

Ich habe versucht, einige Skripte mit einem innerHTMLauf eine Seite zu laden <div>. Es scheint, dass das Skript in das DOM geladen wird, aber es wird nie ausgeführt (zumindest in Firefox und Chrome). Gibt es eine Möglichkeit, Skripte beim Einfügen auszuführen innerHTML?

Beispielcode:

<!DOCTYPE html>
<html>
  <body onload="document.getElementById('loader').innerHTML = '<script>alert(\'hi\')<\/script>'">
    Shouldn't an alert saying 'hi' appear?
    <div id="loader"></div>
  </body>
</html>
Erweitern Sie das Snippet

javascript html dom innerhtml Craig
quelle

Antworten:

88

Sie müssen eval () verwenden , um den Skriptcode auszuführen, den Sie als DOM-Text eingefügt haben.

MooTools erledigt dies automatisch für Sie, und ich bin sicher, dass dies auch bei jQuery der Fall ist (abhängig von der Version, die von jQuery Version 1.6+ verwendet wird eval). Dies erspart <script>Ihnen viel Aufwand beim Parsen von Tags und beim Entkommen Ihrer Inhalte sowie einer Reihe anderer "Fallstricke".

Wenn Sie eval()es selbst tun , möchten Sie den Skriptcode im Allgemeinen ohne HTML-Markup erstellen / senden <script>, da diese nicht eval()ordnungsgemäß funktionieren.

Zombat
quelle
12
Was ich wirklich tun möchte, ist, ein externes Skript zu laden und nicht nur ein lokales Skript zu bewerten. Das Hinzufügen eines Skript-Tags mit innerHTML ist viel kürzer als das Erstellen eines Skript-DOM-Elements und das Hinzufügen zum Body. Ich versuche, meinen Code so kurz wie möglich zu halten. Müssen Sie die dom-Skriptelemente erstellen und zum dom hinzufügen, anstatt nur etwas wie innerHTML zu verwenden? Gibt es eine Möglichkeit, dies mit document.write innerhalb einer Funktion zu tun?
Craig
5
Verwenden Sie, wie von Zombat vorgeschlagen, ein Javascript-Framework, um das externe Skript zu laden. Versuchen Sie nicht, das Rad neu zu erfinden. JQuery macht dies extrem einfach. Fügen Sie einfach JQuery hinzu und rufen Sie auf: $ .getScript (url). Sie können auch eine Rückruffunktion bereitstellen, die ausgeführt wird, sobald das Skript geladen wird.
Ariel Popovsky
2
Ariel hat recht. Ich schätze es, wenn Sie versuchen, Ihren Code kurz zu halten, und das Hinzufügen eines <script>Tags mit innerHTMLmöglicherweise kurz ist, aber es funktioniert nicht. Es ist alles nur einfacher Text, bis er durchlaufen wird eval(). Und leider werden eval()HTML-Tags nicht analysiert, sodass Sie eine Reihe von Problemen haben.
Zombat
21
eval () ist keine gute Lösung für ein Problem.
Buley
2
Ich habe es selbst mit eval () versucht. Es ist eine schreckliche Idee. Sie müssen das Ganze JEDES MAL bewerten . Selbst wenn Sie einen Variablennamen und -wert deklarieren, müssen Sie ihn jedes Mal neu deklarieren / neu bewerten (), damit er funktioniert. Es ist ein Albtraum von Fehlern.
Youstay Igo
88

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

Verwenden Sie dies anstelle von Skript-Tags:

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

user447963
quelle
12
Das ist brilliant!
Confile
Funktioniert bei mir nicht, wenn es in ein Ergebnis einer Ajax-Anfrage eingefügt wird: Syntaxfehler fehlt; vor Anweisung am Anfang der Skriptzeichenfolge
Oliver
Wie fügen Sie Ihrem Seitencode die Zeile & lt; img src ... hinzu? Dokumentieren Sie es.write () oder verwenden Sie dafür den document.body.innerHTML + = Ansatz? Beide scheitern für mich :(
Youstay Igo
Es ist nicht sehr praktisch, viel Code in ein onloadAttribut zu schreiben . Dazu muss auch eine zusätzliche Datei vorhanden sein und geladen werden. Die Lösung von momo ist weniger ein Kompromiss.
Fregante
15
Sie könnten Base64 Ihr Trigger-Image als <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">(dies führt keine Netzwerkanforderung aus) codieren. Eigentlich ... benötigen Sie KEIN Image, verweisen auf ein nicht vorhandenes Image und onloadverwenden es nicht onerror(aber dies führt eine Netzwerkanforderung aus)
Danny '365CSI' Engelman
83

Hier ist eine Methode, die alle Skripte rekursiv durch ausführbare ersetzt: 

function nodeScriptReplace(node) {
        if ( nodeScriptIs(node) === true ) {
                node.parentNode.replaceChild( nodeScriptClone(node) , node );
        }
        else {
                var i        = 0;
                var children = node.childNodes;
                while ( i < children.length ) {
                        nodeScriptReplace( children[i++] );
                }
        }

        return node;
}
function nodeScriptIs(node) {
        return node.tagName === 'SCRIPT';
}
function nodeScriptClone(node){
        var script  = document.createElement("script");
        script.text = node.innerHTML;
        for( var i = node.attributes.length-1; i >= 0; i-- ) {
                script.setAttribute( node.attributes[i].name, node.attributes[i].value );
        }
        return script;
}

Beispielaufruf: 

nodeScriptReplace(document.getElementsByTagName("body")[0]);
mmm
quelle
9
Ich bin ein bisschen überrascht, dass Ihre Antwort ganz unten ist. IMHO, dies ist die beste Lösung. Mit dieser Methode können Sie sogar Skripte mit bestimmten URLs oder Inhalten einschränken.
Davidmh
1
@ inf3rno macht oder nicht? Früher hat es funktioniert, hat jemand jemals etwas anderes behauptet?
mmm
Was ist der Zweck von [0]? können Sie nodeScriptReplace (document.getElementById (). html) verwenden;
Bao Thai
@ BaoThai Ja. Sie können.
mmm
Scheint in IWebBrowser2 nicht zu helfen; Ich kann bestätigen, dass die Skript-Tags mit createElement neu erstellt werden, kann sie jedoch immer noch nicht über InvokeScript () aufrufen.
Dave
46

Sie können ein Skript erstellen und dann den Inhalt einfügen. 

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

Pablo Moretti
quelle
1
Es sei denn, das Dokument enthält keine anderen Skriptelemente. Verwenden Sie document.documentElementstattdessen.
Eli Gray
4
Ist nicht erforderlich, da Sie ein Skript aus einem anderen Skript schreiben. <script> var g = document.createElement('script'); var s = document.getElementsByTagName('script')[0]; //reference this script g.text = "alert(\"hi\");" s.parentNode.insertBefore(g, s); </script>
Pablo Moretti
3
Wer sagt, dass es aus einem anderen Skript stammt? Sie können JavaScript ohne <script>Elemente ausführen . ZB <img onerror="..." src="#">und <body onload="...">. Wenn Sie technisch sein möchten, funktioniert dies aufgrund des unerklärlichen Namespaces auch in Nicht-HTML / SVG-Dokumenten nicht.
Eli Gray
2
Facebook verwendet Pablos Antwort in seinem SDK. developer.facebook.com/docs/javascript/quickstart/v2.2#loading
geoyws
30

Ich habe diesen Code verwendet, er funktioniert einwandfrei

var arr = MyDiv.getElementsByTagName('script')
for (var n = 0; n < arr.length; n++)
    eval(arr[n].innerHTML)//run script inside div
Firas Nizam
quelle
1
Vielen Dank. Es hat mein Problem behoben, Disqus Universal-Code zu einem modalen Popup hinzuzufügen, das mit dem TinyBox2 Jquery-Plugin erstellt wurde.
Gsinha
3
Leider funktioniert diese Lösung nicht, wenn das Skript Funktionen enthält, die später aufgerufen werden.
Jose Gómez
7

Ich hatte dieses Problem mit innerHTML. Ich musste ein Hotjar-Skript an das "head" -Tag meiner Reactjs-Anwendung anhängen und es musste direkt nach dem Anhängen ausgeführt werden.

Eine der guten Lösungen für den dynamischen Knotenimport in das "head" -Tag ist React-helment Modul.

Es gibt auch eine nützliche Lösung für das vorgeschlagene Problem:

Keine Skript-Tags in innerHTML!

Es stellt sich heraus, dass HTML5 das dynamische Hinzufügen von Skript-Tags mithilfe der innerHTML-Eigenschaft nicht zulässt. Das Folgende wird also nicht ausgeführt und es wird keine Warnung mit der Aufschrift "Hallo Welt!" Angezeigt.

element.innerHTML = "<script>alert('Hello World!')</script>";

Dies ist in der HTML5-Spezifikation dokumentiert:

Hinweis: Skriptelemente, die mit innerHTML eingefügt wurden, werden beim Einfügen nicht ausgeführt.

Beachten Sie jedoch, dass innerHTML nicht vor Cross-Site-Scripting geschützt ist. Es ist möglich, JavaScript über innerHTML auszuführen, ohne Tags zu verwenden, wie auf der innerHTML-Seite von MDN dargestellt .

Lösung: Dynamisches Hinzufügen von Skripten

Um ein Skript-Tag dynamisch hinzuzufügen, müssen Sie ein neues Skriptelement erstellen und an das Zielelement anhängen.

Sie können dies für externe Skripte tun:

var newScript = document.createElement("script");
newScript.src = "http://www.example.com/my-script.js";
target.appendChild(newScript);

Und Inline-Skripte:

var newScript = document.createElement("script");
var inlineScript = document.createTextNode("alert('Hello World!');");
newScript.appendChild(inlineScript); 
target.appendChild(newScript);
p.daniel
quelle
5

Für alle, die dies noch versuchen, nein, Sie können ein Skript nicht mit einfügen innerHTML, aber es ist möglich, eine Zeichenfolge mit einem Blobund in ein Skript-Tag zu laden URL.createObjectURL.

Ich habe ein Beispiel erstellt, mit dem Sie eine Zeichenfolge als Skript ausführen und die 'Exporte' des Skripts durch ein Versprechen zurückgeben können:

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

Ich habe dies gegenüber meiner eigentlichen Implementierung vereinfacht, daher gibt es keine Versprechungen, dass keine Fehler darin enthalten sind. Aber das Prinzip funktioniert.

Wenn Sie nach der Ausführung des Skripts keinen Wert mehr zurückerhalten möchten, ist dies noch einfacher. Lass einfach die Promiseund onloadBits weg . Sie müssen nicht einmal das Skript umbrechen oder die globale window.__load_script_exports_Eigenschaft erstellen .

JayArby
quelle
1
Ich habe es gerade versucht und es funktioniert auf Chrome 57. innerHTML auf einem Skript-Tag führt den Text aus.
iPherian
Das ist interessant, es hat vorher nicht funktioniert. Ich frage mich, ob dieses Verhalten browserübergreifend oder nur in Chrome 57 ist.
JayArby
4

Hier ist eine rekursive Funktion zum Festlegen der innerHTML eines Elements, das ich in unserem Ad-Server verwende:

// o: container to set the innerHTML
// html: html text to set.
// clear: if true, the container is cleared first (children removed)
function setHTML(o, html, clear) {
    if (clear) o.innerHTML = "";

    // Generate a parseable object with the html:
    var dv = document.createElement("div");
    dv.innerHTML = html;

    // Handle edge case where innerHTML contains no tags, just text:
    if (dv.children.length===0){ o.innerHTML = html; return; }

    for (var i = 0; i < dv.children.length; i++) {
        var c = dv.children[i];

        // n: new node with the same type as c
        var n = document.createElement(c.nodeName);

        // copy all attributes from c to n
        for (var j = 0; j < c.attributes.length; j++)
            n.setAttribute(c.attributes[j].nodeName, c.attributes[j].nodeValue);

        // If current node is a leaf, just copy the appropriate property (text or innerHTML)
        if (c.children.length == 0)
        {
            switch (c.nodeName)
            {
                case "SCRIPT":
                    if (c.text) n.text = c.text;
                    break;
                default:
                    if (c.innerHTML) n.innerHTML = c.innerHTML;
                    break;
            }
        }
        // If current node has sub nodes, call itself recursively:
        else setHTML(n, c.innerHTML, false);
        o.appendChild(n);
    }
}

Sie können die Demo hier sehen .

Adnan Korkmaz
quelle
3

Sie könnten 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);
}
Jake
quelle
3

Hier eine Lösung, die Skripte , verknüpfte Skripte sowie Module nicht verwendet evalund mit diesen funktioniert .

Die Funktion akzeptiert 3 Parameter:

  • html : String mit dem einzufügenden HTML-Code
  • dest : Verweis auf das Zielelement
  • append : Boolesches Flag, um das Anhängen am Ende des HTML-Zielelements zu aktivieren
function insertHTML(html, dest, append=false){
    // if no append is requested, clear the target element
    if(!append) dest.innerHTML = '';
    // create a temporary container and insert provided HTML code
    let container = document.createElement('div');
    container.innerHTML = html;
    // cache a reference to all the scripts in the container
    let scripts = container.querySelectorAll('script');
    // get all child elements and clone them in the target element
    let nodes = container.childNodes;
    for( let i=0; i< nodes.length; i++) dest.appendChild( nodes[i].cloneNode(true) );
    // force the found scripts to execute...
    for( let i=0; i< scripts.length; i++){
        let script = document.createElement('script');
        script.type = scripts[i].type || 'text/javascript';
        if( scripts[i].hasAttribute('src') ) script.src = scripts[i].src;
        script.innerHTML = scripts[i].innerHTML;
        document.head.appendChild(script);
        document.head.removeChild(script);
    }
    // done!
    return true;
}
colxi
quelle
Ich meine ... Das Anhängen eines Skript-Tags mit Code-Inhalt ist eine Bewertung, nicht wahr?
Kevin B
@ KevinB Es gibt berüchtigte Unterschiede ... versuchen eval('console.log(this)')Sie und Sie werden den offensichtlichsten sehen
colxi
Der Kontext ist also anders, und? Es ist immer noch nur eine Bewertung.
Kevin B
@ KevinB Nein, es ist keine Bewertung. Versuchen Sie dies eval('let b=100').. und versuchen Sie dann, bvon außerhalb des eval zuzugreifen .... viel Glück damit, Sie werden es brauchen
colxi
Funktioniert bei mir. Prost
Bezzzo
1

Krasimir Tsonev hat eine großartige Lösung, die alle Probleme überwindet. Seine Methode muss nicht eval verwenden, daher gibt es keine Leistungs- oder Sicherheitsprobleme. Sie können festlegen, dass die innerHTML-Zeichenfolge HTML mit js enthält, und diese sofort in ein DOM-Element übersetzen, während auch die im Code vorhandenen js-Teile ausgeführt werden. kurz, einfach und funktioniert genau so, wie Sie es möchten.

Genießen Sie seine Lösung:

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

Wichtige Notizen:

  1. Sie müssen das Zielelement mit dem div-Tag umschließen
  2. Sie müssen den src-String mit dem div-Tag umschließen.
  3. Wenn Sie die src-Zeichenfolge direkt schreiben und sie js-Teile enthält, achten Sie bitte darauf, die schließenden Skript-Tags korrekt zu schreiben (mit \ before /), da dies eine Zeichenfolge ist.
user3198805
quelle
1

Verwenden Sie $(parent).html(code)anstelle von parent.innerHTML = code.

Im Folgenden werden auch die verwendeten document.writeSkripte und die über das srcAttribut geladenen Skripte behoben . Leider funktioniert auch dies nicht mit Google AdSense-Skripten.

var oldDocumentWrite = document.write;
var oldDocumentWriteln = document.writeln;
try {
    document.write = function(code) {
        $(parent).append(code);
    }
    document.writeln = function(code) {
        document.write(code + "<br/>");
    }
    $(parent).html(html); 
} finally {
    $(window).load(function() {
        document.write = oldDocumentWrite
        document.writeln = oldDocumentWriteln
    })
}

Quelle

iirekm
quelle
1
Ein bisschen spät hier, aber jeder, der diese Methode verwendet, bemerkt, dass Sie in JQuery Ihre Skripte mit $ .loadScript (url) anstatt mit <script src = "url> </ script> laden müssen - letzteres verursacht a veralteter synchroner XMLHttpRequest-Fehler in Browsern.
Stavm
1

Versuchen Sie es mit template und document.importNode. Hier ist ein Beispiel:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>
<h1 id="hello_world">Sample</h1>
<script type="text/javascript">
 var div = document.createElement("div");
  var t = document.createElement('template');
  t.innerHTML =  "Check Console tab for javascript output: Hello world!!!<br/><script type='text/javascript' >console.log('Hello world!!!');<\/script>";
  
  for (var i=0; i < t.content.childNodes.length; i++){
    var node = document.importNode(t.content.childNodes[i], true);
    div.appendChild(node);
  }
 document.body.appendChild(div);
</script>
 
</body>
</html>
Erweitern Sie das Snippet

Grau
quelle
1
Dies funktioniert nicht mit Microsoft Edge, eine andere Problemumgehung?
Seele
1

Sie können Ihre auch so verpacken <script>und es wird ausgeführt:

<your target node>.innerHTML = '<iframe srcdoc="<script>alert(top.document.title);</script>"></iframe>';

Bitte beachten Sie: Der Bereich im Inneren srcdocbezieht sich auf den Iframe. Sie müssen ihn also topwie im obigen Beispiel verwenden, um auf das übergeordnete Dokument zuzugreifen.

naden
quelle
0

Ja, das können Sie, aber Sie müssen es außerhalb des DOM tun und die Reihenfolge muss stimmen.

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

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

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

Und selbst das funktioniert nicht, weil der Knoten zuerst eingefügt wird:

var scr = '<scr'+'ipt>alert("foo")</scr'+'ipt>';
window.onload = function(){
    var n = document.createElement("div");
    document.body.appendChild(n);
    n.innerHTML = scr;  
}
mwilcox
quelle
16
Für das, was es wert ist: Dies scheint in aktuellen Browsern nicht zu funktionieren.
Wichert Akkerman
0

Meine Lösung für dieses Problem besteht darin, einen Mutationsbeobachter so einzustellen , dass er <script></script>Knoten erkennt und ihn dann durch einen neuen <script></script>Knoten mit demselben src ersetzt. Beispielsweise:

let parentNode = /* node to observe */ void 0
let observer = new MutationObserver(mutations=>{
    mutations.map(mutation=>{
        Array.from(mutation.addedNodes).map(node=>{
            if ( node.parentNode == parentNode ) {
                let scripts = node.getElementsByTagName('script')
                Array.from(scripts).map(script=>{
                    let src = script.src
                    script = document.createElement('script')
                    script.src = src
                    return script
                })
            }
        })
    })
})
observer.observe(document.body, {childList: true, subtree: true});
Gabriel Garcia
quelle
1
Danke, dass du mich herabgestimmt hast, ohne zu sagen warum. Liebe euch alle.
Gabriel Garcia
0

Gabriel Garcias Erwähnung von MutationObservers ist auf dem richtigen Weg, hat aber für mich nicht ganz funktioniert. Ich bin mir nicht sicher, ob dies an einer Browser-Eigenart oder an einem Fehler auf meiner Seite lag, aber die Version, die letztendlich für mich funktioniert hat, 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});
};

Natürlich sollten Sie ersetzen element_to_watch den Namen des Elements , das geändert wird.

node.parentElement.addedwird zum Speichern der hinzugefügten Skript-Tags verwendet document.head. In der Funktion zum Laden der externen Seite können Sie Folgendes verwenden, um nicht mehr relevante Skript-Tags zu entfernen:

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 Beginn einer Ladefunktion:

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
}
pixelherodev
quelle
Sie bemerken, dass Sie MutationObserverjedes Mal ein neues hinzufügen, wenn ein Element an das Dokument angehängt wird, oder? Übrigens frage ich mich, warum mein Code nicht funktioniert.
Gabriel Garcia
@gabrielgarcia Ich sagte, dein Code sei nicht funktionsfähig, weil ich ihn ausprobiert habe und er einfach nicht funktioniert habe. Wenn ich es mir jetzt ansehe, ist es durchaus möglich, dass es an mir lag, nicht an dir, und ich entschuldige mich aufrichtig für die Art und Weise, wie ich das formuliert habe. Jetzt reparieren.
Pixelherodev
Betreff: Hinzufügen eines MutationObservers jedes Mal, wenn ein Element zum Dokument hinzugefügt wird. Worüber sprechen Sie? DOMContentLoaded, und ich zitiere hier aus MDN, "wird ausgelöst, wenn das ursprüngliche HTML-Dokument vollständig geladen und analysiert wurde, ohne darauf zu warten, dass Stylesheets, Bilder und Subframes vollständig geladen werden." Das ist einmal und nur einmal. Darüber hinaus funktioniert dieses Skript auf meiner Website ohne Probleme, und das Debuggen zeigt, dass es nur einmal vorkommt, also sowohl in der Praxis als auch in der Theorie.
Pixelherodev
1
Du hast recht ... Ich habe es falsch gefahren. Ich entschuldige mich auch.
Gabriel Garcia
@gabrielgarcia Kein Problem :)
Pixelherodev
0

Für mich ist der beste Weg, den neuen HTML-Inhalt über innerHtml einzufügen und dann zu verwenden

setTimeout(() => {
        var script_el = document.createElement("script")
        script_el.src = 'script-to-add.js'
        document.body.appendChild(script_el)
    }, 500)

Das setTimeout ist nicht erforderlich, funktioniert aber besser. Das hat bei mir funktioniert.

Luis Tiago Flores Cristóvão
quelle
-1

Führen Sie das Tag (Java Script) von innerHTML aus

Ersetzen Sie Ihr Skriptelement durch div mit dem Klassenattribut class = "javascript" und schließen Sie es mit </div>

Ändern Sie nicht den Inhalt, den Sie ausführen möchten (zuvor befand er sich im Skript-Tag und jetzt im div-Tag).

Fügen Sie Ihrer Seite einen Stil hinzu ...

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

Führen Sie nun eval mit jquery aus (Jquery js sollte bereits enthalten sein)

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

    });`

Weitere Informationen finden Sie hier in meinem Blog.

Wissensdienst
quelle