Jak załadować zewnętrzny plik JavaScript podczas zdarzenia "onclick"?

Question

Mam 2 elementy div w moim kodzie HTML.

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

Na kliknięcie „Div2” Chcę, aby załadować zewnętrznego pliku JavaScript powiedzieć na przykład „https://abcapis.com/sample.js”.

Próbowałem w tym pliku JS o zdarzeniu onclick jak poniżej,

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

Obejmowały tag skryptu w sekcji head, ale nie ładować, ponieważ tag skrypt zostanie załadowany na stronie obciążenia tylko (poprawcie mnie tutaj, jeśli się mylę).

Czy istnieje inny sposób postępowania.

Dzięki z góry.

Answer 1

Korzystanie z funkcji jQuery $ .getScript() powinno wykonać zadanie za Ciebie.

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

Oto kawałek kodu próbki:

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

Jeśli nie używasz jQuery, będziesz musiał nauczyć się korzystać z AJAX dynamicznie załadować nowy skrypt do swojej strona.

Answer 2

Twój kod prawie działa. Musisz użyć .setAttribute. Oto mój działający kod. Użyłem jQuery jako mojego skryptu:

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

I to zrobi.

EDYTOWANIE:

Więcej informacji. Kiedy robisz coś takiego jak script.type = 'text/javascript' ustawiasz właściwość obiektu, ale niekoniecznie to samo, co powiązanie tej właściwości z rzeczywistym atrybutem węzła.

Answer 3

Czy używasz jQuery? Jeśli tak, możesz spróbować $.getScript().

Możesz również sprawdzić to answer. Ale w zasadzie, można zrobić coś takiego:

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

informacji mi brakowało, że ścieżka musi być absolutna.