Comment faire pour charger un fichier Javascript externe lors d'un événement comme “onclick”?

J'ai 2 divs dans mon code HTML.

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

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

J'ai essayé d'inclure le fichier javascript 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);

Ce inclus la balise script dans la section d'en-tête, mais n'a pas de charge depuis la balise script sera chargé au chargement de la page seule(corrigez-moi ici si je me trompe).

Est-il un autre moyen que je pouvais continuer.

Merci d'Avance.

Êtes-vous sûr que votre code est en cours d'exécution? On dirait qu'il devrait travailler pour moi, et il fonctionne parfaitement bien pour moi sur Chrome.

OriginalL'auteur Abu | 2013-10-03

  1. 18

    À l'aide de jQuery $.getScript() la fonction devrait faire le travail pour vous.

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

    Ici est une tranche de l'échantillon de code:

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

    Si vous n'êtes pas à l'aide de jQuery, vous allez avoir à apprendre à utiliser AJAX pour charger dynamiquement nouveau script dans votre page.

    OriginalL'auteur tremor

  2. 9

    Votre code fonctionne presque. Vous avez besoin d'utiliser .setAttribute. Voici mon code de travail. J'ai utilisé jQuery que mon script:

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

    Et que vais le faire.

    EDIT:

    Quelques infos. Quand vous faites quelque chose comme script.type = 'text/javascript' vous êtes à la définition d'une propriété sur l'objet, mais ce n'est pas nécessairement la même chose que de l'associer à la propriété, avec un nœud attribut.

    cela a fonctionné parfaitement pour moi!
    "text/javascript" n'est plus nécessaire sur les scripts et il est conseillé de supprimer le type
    vrai. Je n'inclus ici parce que c'est une partie de la question d'origine.

    OriginalL'auteur rescuecreative

  3. 2

    Êtes-vous à l'aide de jQuery ? Si oui, vous pouvez essayer $.getScript().

    Vous pourriez aussi vous voulez vérifier ce réponse. Mais, fondamentalement, vous pouvez faire quelque chose comme ceci :

    <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>

    OriginalL'auteur Simon Walsh

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

    Une info, j'ai manqué était, que le chemin d'accès doit être absolue.

    OriginalL'auteur Marius Seack