Dynamisches Hinzufügen von Skript-Tag in Javascript

Question

Ich versuche, ein Skript-Tag dynamisch durch Javascript in meiner HTML-Seite hinzuzufügen. Gleich nach dem Code versuche ich ein paar Funktionen des neu hinzugefügten Skripts aufzurufen. Ich erhalte jedoch JS-Fehler, weil das Skript zu diesem Zeitpunkt noch nicht geladen wurde. Ich habe mehrere Posts durchgesehen, aber keiner von ihnen erklärt, wie Sie Ihr Skript explizit ausführen.

Answer 1

Sie müssen für die onload Veranstaltung Ihrer neu hinzugefügte Skript oder onreadystatechange für IE < 11.

var script = document.createElement('script'); 

script.onload = function() { 
    // it's ready, so call your functions here 
} 

// now insert your new script into the document 

Für IE < 11 hören:

script.onreadystatechange = function() { 
    if (script.readyState === 'loaded' || script.readyState === 'complete') { 
    // it's ready, so call your functions here 
    } 
} 

Answer 2

Diese Sie können ausführen Skripte wann und nur wenn die ganze Seite geladen wurde. Es gibt auch andere Möglichkeiten, dies zu tun, aber ich denke, das ist eine einfach und effektiv:

<script> 
    function downloadJSAtOnload() { 
     var element = document.createElement("script"); 
     element.src = './js/ding.js'; 
     document.body.appendChild(element); 
     var element1 = document.createElement("script"); 
     element1.src = './js/dong.js'; 
     document.body.appendChild(element1); 
    } 
    if (window.addEventListener) 
     window.addEventListener("load", downloadJSAtOnload, false); 
    else if (window.attachEvent) 
     window.attachEvent("onload", downloadJSAtOnload); 
    else window.onload = downloadJSAtOnload; 
</script> 

Platz auf Ihrer Seite am Ende des Body-Tages. Alles, was von diesem Codeblock importiert wird, wird zuletzt ausgeführt und stellt sicher, dass alle im Kopf aufgerufenen Skripte vorhanden sind.

Ich benutze dieses Muster überall, weil es semantisch ist. Meine Scripts vom Typ "Bibliothek" werden in meinen Kopf geladen, und dann wartet mein benutzerdefinierter Code darauf, dass das gesamte Dom vor der Ausführung gerendert wird.