Wie lade ich eine externe Javascript-Datei während eines "onclick" -Ereignisses?

Question

Ich habe 2 Divs in meinem HTML.

<div id="div1"></div> 
<div id="div2"></div> 

auf die Schaltfläche „div2“ ich eine externe laden möchten JavaScript-Datei zum Beispiel sagen: „https://abcapis.com/sample.js“.

Ich hat versucht, einschließlich der JS-Datei auf Onclick-Ereignisse wie unten,

var script = document.createElement("script"); 
script.type = "text/javascript"; 
script.src = "https://abcapis.com/sample.js"; 
document.getElementsByTagName("head")[0].appendChild(script); 

Das den Skript-Tag im Kopfteil enthalten, aber nicht geladen wurde, da der Script-Tag nur beim Laden der Seite geladen wird (korrigieren Sie mich, hier, wenn ich falsch liege).

Gibt es eine andere Möglichkeit, die ich weitermachen könnte.

Vielen Dank im Voraus.

Answer 1

Die Verwendung der jQuery $ .getScript() - Funktion sollte die Aufgabe für Sie erledigen.

http://api.jquery.com/jQuery.getScript/

ist hier ein Stück Beispielcode:

$("button").click(function(){ 
    $.getScript("demo_ajax_script.js"); 
}); 

Wenn Sie nicht jQuery verwenden, Sie gehen zu müssen lernen, wie AJAX zu verwenden dynamisch neuen Skript laden in Ihre Seite.

Answer 2

Ihr Code funktioniert fast. Sie müssen .setAttribute verwenden. Hier ist mein Arbeitscode. Ich benutzte jQuery als mein Skript:

var script = document.createElement('script'); 
script.setAttribute('type', 'text/javascript'); 
script.setAttribute('src', 'jquery.min.js'); 
document.head.appendChild(script); 

Und das wird es tun.

EDIT:

Einige weitere Informationen. Wenn Sie etwas wie script.type = 'text/javascript' tun, legen Sie eine Eigenschaft für das Objekt fest, aber dies ist nicht unbedingt dasselbe, wie diese Eigenschaft mit einem tatsächlichen Knotenattribut zu verknüpfen.

Answer 3

Verwenden Sie jQuery? Wenn ja, können Sie versuchen $.getScript().

Sie können dies auch überprüfen answer. Aber im Grunde kann man so etwas tun:

<a href='linkhref.html' id='mylink'>click me</a> 
<script type="text/javascript"> 
    var myLink = document.getElementById('mylink'); 

    myLink.onclick = function(){ 

     var script = document.createElement("script"); 
     script.type = "text/javascript"; 
     script.src = "Public/Scripts/filename.js."; 
     document.getElementsByTagName("head")[0].appendChild(script); 
     return false; 
    } 
</script> 

Answer 4

$("button").click(function(){ 
    $.getScript("demo_ajax_script.js"); 
}); 

Ein Info Ich vermisste war, dass der Pfad absolut sein muss.