chargement du script une seule fois lors d'un événement de clic

Question

J'ai piraté ensemble du vanilla javascript pour charger un script externe lors d'un événement de clic.

var searchLabel = document.getElementById('search-toggle-label');
searchLabel.onclick = function(){
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "wp-content/themes/2016/js/cse.js."; 
    document.getElementsByTagName("head")[0].appendChild(script);
    return false;
}

Mais il continue de charger le même script à chaque fois lors d'un événement de clic.

J'ai donc ajouté une instruction if pour vérifier la valeur et le type. "==="

var searchLabel = document.getElementById('search-toggle-label');
if (typeof searchLabel === 'undefined') {
    searchLabel.onclick = function() {
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "wp-content/themes/2016/js/cse.js."; 
        document.getElementsByTagName("head")[0].appendChild(script);
        return false;
    }
}
else {
    alert('loaded already');
}

Évidemment, c'est faux puisque je reçois une alerte lors du chargement de la page et lors d'un événement de clic, le script ne se charge pas.

Je suis perplexe. Je sais qu'il existe une solution simple en utilisant jQuery mais j'essaie réellement d'apprendre à écrire en javascript.

Toute aide sera fortement appréciée.

javascript onclick getelementbyid typeof getelementsbytagname

0

HackYa 5 mars 2016 à 03:09

Answer 1

Supprimez l'écouteur d'événements une fois qu'il s'est déclenché:

var searchLabel = document.getElementById('search-toggle-label');
searchLabel.addEventListener('click', loadScript, false);

function loadScript(){
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "wp-content/themes/2016/js/cse.js."; 
    document.getElementsByTagName("head")[0].appendChild(script);
    searchLabel.removeEventListener('click', loadScript, false);
    return false;
}

2

Malk 5 mars 2016 à 00:20

Answer 2

Ajoutez une fonction pour renvoyer true / false si un script est présent dans le DOM. En voici un:

function isScriptLoaded(src) {
  return !!Array.prototype.filter.call(document.getElementsByTagName('script'), function(node) {
    return node.src === src;
  });
}

Ensuite, utilisez-le pour tester si le script est déjà inséré dans le DOM.

0

Cymen 5 mars 2016 à 00:27

Answer 3

Essayez peut-être de définir un indicateur avant la définition de la fonction. De cette façon, vous pouvez vérifier l'indicateur au début de la fonction et omettre le reste. Vous avez également un excellent exemple que j'ai trouvé sur Internet. Recherchez cette solution.

0

Jernej K 5 mars 2016 à 00:17

chargement du script une seule fois lors d'un événement de clic

3 réponses

Questions connexes

De nouvelles questions

javascript