web-dev-qa-db-fra.com

Comment charger un fichier Javascript externe lors d'un événement "onclick"?

J'ai 2 divs dans mon HTML.

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

En cliquant sur le "div2" je veux charger un fichier javascript externe disons par exemple " https://abcapis.com/sample.js ".

J'ai essayé d'inclure le fichier JS sur l'événement onclick comme ci-dessous,

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

Cela incluait la balise de script dans la section head mais ne se chargeait pas car la balise de script sera chargée uniquement lors du chargement de la page (corrigez-moi ici si je me trompe).

Y a-t-il une autre façon de procéder?.

Merci d'avance.

javascriptjqueryhtmljspdojo
12
Abu

L'utilisation de la fonction $ .getScript () de jQuery devrait faire le travail pour vous.

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

Voici une tranche d'exemple de code:

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

Si vous n'utilisez pas jQuery, vous allez devoir apprendre à utiliser AJAX pour charger dynamiquement un nouveau script dans votre page.

20
tremor

Votre code fonctionne presque. Vous devez utiliser .setAttribute. Voici mon code de travail. J'ai utilisé jQuery comme script:

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

Et ça va le faire.

ÉDITER:

Quelques informations supplémentaires. Lorsque vous faites quelque chose comme script.type = 'text/javascript' vous définissez une propriété sur l'objet mais ce n'est pas nécessairement la même chose que d'associer cette propriété à un attribut de nœud réel.

9
rescuecreative

Utilisez-vous jQuery? Si c'est le cas, vous pouvez essayer $. GetScript () .

Vous pourriez également vouloir vérifier cela réponse . Mais en gros, vous pouvez faire quelque chose comme ça:

<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>
2
Simon Walsh
$("button").click(function(){
  $.getScript("demo_ajax_script.js");
});

Une information que j'ai manquée était que le chemin doit être absolu.

1
Marius Seack