Come caricare un file Javascript esterno durante un evento "onclick"?

Question

Ho 2 div nel mio HTML.

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

Facendo clic sul "div2" voglio caricare un file JavaScript esterno dire ad esempio "https://abcapis.com/sample.js".

ho cercato incluso il file JS su evento onclick come qui di seguito,

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

Ciò ha incluso il tag script nella sezione di testa, ma non è stato caricato in quanto il tag script verrà caricato al caricamento della pagina solo (correggetemi qui se sbaglio).

C'è qualche altro modo in cui potrei procedere.

Grazie in anticipo.

Answer 1

Utilizzare la funzione $ .getScript() di jQuery dovrebbe fare il lavoro per voi.

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

Ecco una fetta di codice di esempio:

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

Se non si utilizza jQuery, si sta andando ad avere per imparare ad usare AJAX per caricare dinamicamente nuovo script nella vostra pagina.

Answer 2

Il tuo codice funziona quasi. Devi usare .setAttribute. Ecco il mio codice di lavoro. Ho usato jQuery come mio script:

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

E lo farò.

MODIFICA:

Altre informazioni. Quando fai qualcosa come script.type = 'text/javascript' stai impostando una proprietà sull'oggetto ma questo non è necessariamente la stessa cosa che associare quella proprietà con un effettivo attributo nodo.

Answer 3

Stai usando jQuery? Se è così, puoi provare a $.getScript().

Si potrebbe anche voler controllare questo answer. Ma in fondo, si può fare qualcosa di simile:

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

Un informazioni che mancava era, che il percorso deve essere assoluto.